/*css/screens/06-login-home.css*/
    @keyframes login-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .login-card { display: flex; max-width: 800px; width: 92vw; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(5,150,105,0.1), 0 4px 20px rgba(0,0,0,0.04); background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); position: relative; z-index: 1; animation: login-fade-in 0.6s ease-out; } .login-card-left { flex: 0 0 320px; background: linear-gradient(160deg, #10b981 0%, #059669 50%, #047857 100%); color: white; padding: 48px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .login-card-left::after { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.12); border-radius: 50%; } .login-hero-content { position: relative; z-index: 1; } .login-brand { margin-bottom: 24px; } .login-brand-logo { width: 48px; height: 48px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); } .login-hero-title { font-size: 32px; font-weight: var(--weight-bold); letter-spacing: -1px; margin-bottom: 16px; line-height: 1; outline: none; } .login-card-left *:focus { outline: none; } .login-card-right h3:focus, .login-card-right p:focus, .login-card-right label:focus, .login-card-right div:focus { outline: none; } .login-hero-copy { font-size: 18px; font-weight: var(--weight-semibold); margin-bottom: 8px; line-height: 1.4;   white-space: pre-line; } .login-hero-sub { font-size: 13px; opacity: 0.7; line-height: 1.6; margin-bottom: 32px; white-space: pre-line; } .login-features { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .login-feature-item { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: var(--weight-medium); opacity: 0.7; padding: 6px 0; background: none; border-radius: 0; } .login-feature-item svg { opacity: 0.9; flex-shrink: 0; }   .login-preview { margin-top: 24px; animation: login-preview-float 6s ease-in-out infinite; } .login-preview-svg { width: 100%; max-width: 220px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2)); } @keyframes login-preview-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .login-card-right { flex: 1; padding: 0; display: flex; align-items: center; justify-content: center; } .login-form-inner { padding: 48px 40px; width: 100%; max-width: 360px; }   .login-title { font-size: 24px; font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: 6px; letter-spacing: -0.5px; } .login-subtitle { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 32px; } .login-field { margin-bottom: 24px; } .login-label { display: block; font-size: 11px; font-weight: var(--weight-bold); color: var(--color-text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.8px; } .login-select-wrap { position: relative; } .login-select { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 14px; background: var(--color-bg-elevated); appearance: auto; transition: border-color var(--duration-normal), box-shadow var(--duration-normal), background var(--duration-normal); color: #1e293b; } .login-select:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1); background: var(--color-bg-base);   } .login-btn { width: 100%; padding: 13px 24px; background: linear-gradient(135deg, #059669, #047857); color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: var(--weight-bold); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal); box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35); letter-spacing: 0.3px; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45); } .login-btn:active { transform: translateY(0); } .login-error { color: #dc2626; font-size: 12px; margin-top: 14px; text-align: center; background: #fef2f2; padding: 10px 14px; border-radius: 10px; border: 1px solid #fecaca; } .login-footer { margin-top: 32px; font-size: 11px; color: #94a3b8; text-align: center; letter-spacing: 1px; }   a.login-btn { text-decoration: none; }   .login-invite { margin: 14px 0 0; font-size: 11px; color: var(--color-text-tertiary); text-align: center; }   .space-selector { position: relative; width: 100%; max-width: 680px; margin: 0 auto; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 20px; box-shadow: 0 10px 40px rgba(20,40,30,.12); padding: 26px 28px 26px; z-index: 1; } .space-sel-back { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-border-default); background: var(--color-bg-base); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); text-decoration: none; } .space-sel-back:hover { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .space-sel-back svg { width: 14px; height: 14px; } .space-sel-head { text-align: center; margin: 6px 0 20px; } .space-sel-title { font-size: 22px; font-weight: var(--weight-bold); margin: 0 0 6px; color: var(--color-text-primary); } .space-sel-sub { font-size: 13px; color: var(--color-text-secondary); margin: 0; } .space-sel-err { font-size: 13px; font-weight: var(--weight-bold); color: var(--color-error); text-align: center; margin: 6px 0 0; } .space-sel-empty { text-align: center; padding: 6px 6px 2px; } .space-sel-empty-line { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; margin: 8px 0 0; } .space-sel-empty-btn { display: inline-block; margin-top: 16px; padding: 9px 16px; border-radius: 10px; border: 1.5px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-primary); font-size: 13px; font-weight: var(--weight-bold); text-decoration: none; } .space-sel-empty-btn:hover { border-color: var(--color-primary); background: var(--color-primary-surface); } .space-sel-empty-btn-primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-on-primary, #fff); } .space-sel-empty-btn-primary:hover { background: var(--color-primary-dark, #1AA46E); border-color: var(--color-primary-dark, #1AA46E); } .space-sel-empty-btn + .space-sel-empty-line { margin-top: 18px; } .space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: 360px; overflow-y: auto; padding: 2px; } .space-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; background: var(--color-bg-base); border: 1.5px solid var(--color-border-default); border-radius: 16px; cursor: pointer; box-shadow: 0 2px 0 rgba(20,40,30,.04); transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); } .space-card:hover { background: var(--color-primary-surface-light, #F4FBF7); border-color: var(--color-primary); transform: translateY(-1px); } .space-card:disabled { opacity: .6; cursor: default; } .space-card-ic { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #1AA46E)); display: flex; align-items: center; justify-content: center; flex: none; } .space-card-ic svg { width: 24px; height: 24px; } .space-card-name { font-size: 14px; font-weight: var(--weight-bold); color: var(--color-text-primary); text-align: center; line-height: 1.35; word-break: break-word; }   .space-card-guestbadge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 9px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-2xs, 10px); font-weight: var(--weight-bold); line-height: 1.6; } .space-sel-powered { text-align: center; margin-top: 12px; font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 1px; } @media (max-width: 620px) { .space-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .space-grid { grid-template-columns: 1fr; } }   .login-compact-brand, .login-compact-lead { display: none; } .login-compact-brand { align-items: center; gap: 10px; margin-bottom: 16px; color: var(--color-primary-on-surface); font-size: 18px; font-weight: var(--weight-bold); } .login-compact-brand svg { width: 26px; height: 26px; } .login-compact-copy { margin: 10px 0 0; font-size: 12px; color: var(--color-text-secondary); } .login-compact-features { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 24px; } .login-compact-feature { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-medium); color: var(--color-text-tertiary); } .login-compact-feature svg { width: 13px; height: 13px; }   .login-redirecting { position: relative; z-index: 1; text-align: center; padding: 80px 20px; color: var(--color-text-secondary); } .login-redirecting .sp-spinner { margin: 0 auto 10px; } .login-redirect-retry { margin-bottom: 16px; font-size: 14px; color: var(--color-text-secondary); } .login-btn-retry { max-width: 260px; margin: 0 auto; }   @media (max-width: 840px) { .login-card { flex-direction: column; border-radius: 20px; } .login-card-left { display: none; } .login-compact-brand { display: flex; } .login-compact-lead { display: block; } .login-form-inner { padding: 32px 24px; max-width: 480px; } } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 9pt; margin-bottom: 4px; color: var(--color-text-secondary); font-weight: var(--weight-semibold); } .form-group input { width: 100%; padding: 7px 12px; border: 1px solid var(--color-border-muted); border-radius: 15px; font-size: 10pt; outline: none; } .form-group input:focus { border-color: var(--color-primary); } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 24px; background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: var(--radius-lg); cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-semibold); text-decoration: none; text-align: center; transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast), box-shadow var(--duration-fast); } .btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34, 187, 128, 0.3); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 24px; background: var(--color-bg-base); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast); } .btn-secondary:hover { background: var(--color-bg-sunken); border-color: var(--color-border-muted); } .btn-secondary.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }     .home-dashboard { padding: 0; height: 100%; overflow-y: auto; background: var(--color-bg-sunken); } .home-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; background: transparent; } .home-header-text { display: flex; flex-direction: column; gap: 2px;   flex: 1 1 auto; min-width: 0; align-items: flex-start; } .home-header-title { font-size: 22px; font-weight: var(--weight-bold); color: var(--color-text-primary); letter-spacing: -0.3px; } .home-header-greeting { font-size: var(--font-xs); color: var(--color-text-tertiary); font-weight: var(--weight-normal); } @keyframes home-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }   @media (max-width: 1100px) { .home-header { flex-wrap: wrap; row-gap: 10px; }   .home-header-text { flex: 1 1 240px; }   .home-persona-seg { margin-left: auto; } } @media (max-width: 900px) { } @media (max-width: 500px) { } .home-card { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 1px 3px var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease; } .home-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .home-card[onclick] { cursor: pointer; } .home-card-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; } .home-card-icon { width: 28px; height: 28px; flex-shrink: 0; padding: 4px; border-radius: var(--radius-md); background: var(--color-primary-surface); } .home-card-icon-svg { width: 28px; height: 28px; flex-shrink: 0; padding: 4px; border-radius: var(--radius-md); background: var(--color-primary-surface); } [onclick*="cabinet"] .home-card-icon-svg{ background: #d1fae5; } .home-card-title { font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-primary); flex: 1; } .home-card-body { padding: 12px 20px 16px; flex: 1; } .member-known-as { font-size: 11px; color: var(--color-text-tertiary); margin-left: 4px; } .member-email { font-size: 12px; color: var(--color-text-secondary); } .home-member-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; color: var(--color-text-secondary); }       .home-wait { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-text-tertiary); } .home-wait-block { display: flex; padding: 14px 2px; } .home-wait-ring { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 2px solid var(--color-border-default); border-top-color: var(--color-primary); animation: home-wait-spin 0.8s linear infinite; } @keyframes home-wait-spin { to { transform: rotate(360deg); } }   @media (prefers-reduced-motion: reduce) { .home-wait-ring { animation: none; } }   .home-welcome { margin: 0 24px 24px; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--color-primary-surface, rgba(34, 187, 128, 0.08)); border: 1px solid var(--color-primary); text-align: center; } .home-welcome-title { font-size: 22px; font-weight: bold; color: var(--color-primary-on-surface); margin: 0 0 8px; } .home-welcome-org { font-size: 14px; color: var(--color-text-primary); margin: 0 0 8px; } .home-welcome-desc { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 20px; } .home-welcome-actions { display: flex; justify-content: center; gap: 8px; } .home-sub-action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; color: var(--color-primary-on-surface); background: var(--color-primary-surface, rgba(34, 187, 128, 0.08)); border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .home-sub-action-btn:hover { background: rgba(34, 187, 128, 0.15); }   .home-section-heading { padding: 0 24px; margin-bottom: 8px; } .home-section-heading-title { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 2px; } .home-section-heading-sub { display: block; font-size: 11px; color: var(--color-text-tertiary); opacity: 0.7; } .home-section-heading { margin-top: 8px; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { }   .home-section-wrap { padding: 0 24px 16px; } .home-storage-bar-wrap { margin: 4px 0 8px; } .home-storage-bar-bg { height: 6px; background: var(--color-border-default); border-radius: 3px; overflow: hidden; } .home-storage-bar-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.3s ease; } .home-storage-bar-fill.bar-warning { background: var(--color-warning, #f59e0b); } .home-storage-bar-fill.bar-danger { background: var(--color-error, #ef4444); }   .home-plan-badge { font-size: 11px; font-weight: 600; color: var(--color-primary-on-surface); background: var(--color-primary-surface, rgba(34, 187, 128, 0.08)); padding: 2px 6px; border-radius: 4px; margin-left: 8px; } .home-plan-usage-row { margin-bottom: 8px; } .home-plan-usage-label { font-size: 12px; color: var(--color-text-secondary); display: block; margin-bottom: 4px; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { }   .home-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; }   .home-member-drag { width: 12px; flex-shrink: 0; display: inline-flex; justify-content: center; color: var(--color-text-tertiary); cursor: grab; opacity: 0; } .home-member-row:hover .home-member-drag { opacity: 1; } .home-member-drag.is-hidden { visibility: hidden; } .home-member-row.is-dragging { opacity: 0.5; } .home-member-row.is-drop-target { box-shadow: inset 0 2px 0 var(--color-primary); } .home-member-row:last-child { border-bottom: none; } .home-member-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); flex-shrink: 0; overflow: hidden; } .home-member-avatar img { width: 100%; height: 100%; object-fit: cover; } .home-member-info { flex: 1; min-width: 0; } .home-member-name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-member-known-as { font-weight: normal; color: var(--color-text-tertiary); font-size: 12px; } .home-member-email { display: block; font-size: 11px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-member-voice { display: block; font-size: 11px; color: var(--color-primary-on-surface); opacity: 0.8; } .home-member-badge { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); background: var(--color-bg-sunken); padding: 2px 8px; border-radius: 8px; flex-shrink: 0; min-width: 48px; text-align: center; } .home-member-badge-admin { color: var(--color-error, #ef4444); background: rgba(239, 68, 68, 0.1); } .home-member-toggle { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-tertiary); cursor: pointer; padding: 8px 0 0; }   .home-plan-cancel { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px; border-radius: 6px; background: var(--color-warning-surface); } .home-plan-cancel-text { font-size: 12px; font-weight: 600; color: var(--color-warning); } .home-plan-cancel-btn { padding: 3px 8px; border: 0; background: transparent; color: var(--color-primary-on-surface); font-size: 12px; cursor: pointer; }   .home-member-showall { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--color-primary-on-surface); cursor: pointer; }   .home-member-trash-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 4px 10px; font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 4px; cursor: pointer; } .home-member-trash-btn.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); } .home-member-trash-count { padding: 0 5px; border-radius: 7px; background: var(--color-border-default); color: var(--color-text-primary); font-size: 10px; font-weight: 600; } .home-member-trash { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); } .home-member-trash-head { display: flex; align-items: center; } .home-member-trash-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text-primary); } .home-member-trash-close { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 0; background: transparent; color: var(--color-text-tertiary); font-size: 10px; cursor: pointer; } .home-member-trash-desc { margin: 2px 0 8px; font-size: 10px; color: var(--color-text-tertiary); } .home-member-trash-empty { margin: 0; font-size: 12px; color: var(--color-text-tertiary); } .home-member-trash-row { display: flex; align-items: center; margin: 0 0 4px; padding: 6px 8px; border-radius: 6px; background: var(--color-bg-base); } .home-member-trash-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-text-secondary); } .home-member-trash-restore { margin-left: 8px; font-size: 12px; color: var(--color-primary-on-surface); cursor: pointer; }   .home-space-avatar-hit { position: relative; } .home-space-avatar-hit.is-editable { cursor: pointer; } .home-space-avatar-hover { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(16, 16, 32, 0.65); color: var(--color-text-on-primary); font-size: 10px; font-weight: bold; } .home-space-avatar-hit.is-editable:hover .home-space-avatar-hover { display: flex; }   .home-dash-setting-close { margin-left: auto; padding: 4px; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; line-height: 0; }   .home-member-viewtoggle { display: inline-flex; gap: 2px; margin-left: 8px; } .home-member-viewbtn { width: 28px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: 4px; } .home-member-viewbtn.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); }   .home-member-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .home-member-card {   position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); min-width: 0; cursor: pointer; } .home-member-card-body { flex: 1; min-width: 0;   padding-right: 56px; display: flex; flex-direction: column; align-items: flex-start; }   .home-member-card-mile { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; }   .home-member-card > .home-member-badge { position: absolute; top: 10px; right: 10px; } .home-member-row-mile { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; } .home-member-rank-coin { display: inline-flex; line-height: 0; } .home-mile-badge { display: inline-flex; align-items: center; height: 20px; } .home-member-card-body .home-mile-badge { margin-top: 3px; } .home-mile-emblem { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #fff 45%) 0%, var(--tier-color, #B4B4B4) 55%, color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #000 30%) 100%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #000 30%); color: #fff; font-size: var(--font-2xs); font-weight: 700; line-height: 1; }   .home-mile-emblem.dormant { opacity: 0.6; } .home-mile-bar { width: 50px; height: 6px; margin-left: 3px; overflow: hidden; border-radius: 3px; background: var(--color-border-muted); } .home-mile-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(to right, var(--tier-color, #B4B4B4), color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #fff 16%)); }   .home-mile-legend-anchor { position: relative; display: inline-flex; margin-left: 8px; } .home-mile-legend-btn { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .home-mile-legend-btn svg { width: 16px; height: 16px; } .home-mile-legend-dismiss { position: fixed; inset: 0; z-index: var(--z-dropdown); } .home-mile-legend-popup {   position: fixed; top: 120px; right: 16px; z-index: var(--z-dropdown); min-width: 200px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); box-shadow: 0 4px 16px var(--color-overlay-black-15); } .home-mile-legend-title { margin-bottom: 4px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .home-mile-legend-desc { margin-bottom: 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-mile-legend-row { display: flex; align-items: center; gap: 8px; margin: 1px 0; padding: 4px 6px; border-radius: var(--radius-sm); } .home-mile-legend-row.is-current { background: var(--color-primary-surface); } .home-mile-legend-name { font-size: var(--font-xs); color: var(--color-text-primary); } .home-mile-legend-here { margin-left: -2px; font-size: var(--font-2xs); color: var(--color-primary-on-surface); }   .home-activity-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 4px; } .home-activity-text { flex: 1; font-size: 12px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-activity-time { font-size: 11px; color: var(--color-text-tertiary); flex-shrink: 0; }   .home-absence-banner { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(245, 158, 11, 0.08); border: 1px solid var(--color-warning, #f59e0b); border-radius: var(--radius-lg); } .home-absence-icon { font-size: 14px; flex-shrink: 0; } .home-absence-text { font-size: 12px; color: var(--color-text-primary); }   .home-dash-setting-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-primary); margin-bottom: 4px; cursor: pointer; } .home-dash-setting-item input[type="checkbox"] { accent-color: var(--color-primary); }   .home-header-date { font-size: 11px; color: var(--color-text-tertiary); margin-left: auto; flex-shrink: 0; white-space: nowrap; }   .home-header-settings-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .home-header-settings-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }   .dashboard { padding: 30px; } .dashboard > p { font-size: 12pt; color: var(--color-text-secondary); margin-bottom: 4px; }   .btn-delete:hover { background: #FFE0E0; }     .home-persona-seg {   position: relative; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-sunken); } .home-persona-seg-item { padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; } .home-persona-seg-item.is-on { background: var(--color-bg-elevated); color: var(--color-text-primary); } .home-persona-seg-mail.is-on { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); }   .home-persona-seg-reply.is-on { background: var(--color-feature-message-surface); color: var(--color-feature-message); }   .home-mailroom-card { margin: 0 0 12px; padding: 20px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); } .home-mailroom-head { display: flex; align-items: center; gap: 12px; } .home-mailroom-tile { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 22px; font-weight: bold; background: var(--color-mail-receive-surface); color: var(--color-mail-receive); } .home-mailroom-head-text { display: flex; flex-direction: column; min-width: 0; } .home-mailroom-head-line { display: flex; align-items: center; gap: 10px; } .home-mailroom-title { font-size: 16px; font-weight: bold; color: var(--color-text-primary); } .home-mailroom-ready { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--color-success-dark, var(--color-success)); } .home-mailroom-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); } .home-mailroom-notready { padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; background: var(--color-warning-surface); color: var(--color-warning-dark, var(--color-warning)); } .home-mailroom-inbound { margin-top: 2px; font-size: 11px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .home-mailroom-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .home-mailroom-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px; border: 1px solid transparent; border-radius: 16px; background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); font-size: 11px; font-weight: 600; cursor: pointer; } .home-mailroom-chip:hover { border-color: var(--color-feature-tracking); }     .home-mailroom-counts { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 52px; margin: 20px 4px 0; } .home-mailroom-num { font-size: 38px; font-weight: 300; line-height: 1; text-align: center; } .home-mailroom-num-recv { color: var(--color-mail-receive); } .home-mailroom-num-done { color: var(--color-success-dark, var(--color-success)); } .home-mailroom-num-warn { color: var(--color-warning-dark, var(--color-warning)); } .home-mailroom-num-calm { color: var(--color-feature-tracking); }   .home-mailroom-num-off { color: var(--color-error); } .home-mailroom-num-wrap { position: relative; display: block; cursor: pointer; } .home-mailroom-num-wrap .home-mailroom-num { display: block; }   .home-mailroom-tip { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 20; max-width: 260px; width: max-content; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); text-align: left; } .home-mailroom-num-wrap:hover .home-mailroom-tip { display: block; } .home-mailroom-tip-title { display: block; font-size: 12px; font-weight: bold; color: var(--color-warning-dark, var(--color-warning)); } .home-mailroom-tip-body { display: block; margin-top: 5px; font-size: 11px; color: var(--color-text-secondary); } .home-mailroom-tip-foot { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); } .home-mailroom-loading { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; color: var(--color-text-secondary); } .home-mailroom-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border-default); border-top-color: var(--color-mail-receive); animation: home-mailroom-spin 0.9s linear infinite; } @keyframes home-mailroom-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .home-mailroom-spinner { animation: none; } }   .home-mailroom-rail { position: relative; height: 26px; margin: 4px 4px 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }   .home-mailroom-rail.is-4 { grid-template-columns: repeat(4, 1fr); } .home-mailroom-rail.is-4 .home-mailroom-rail-line { left: 12.5%; right: 37.5%; } .home-mailroom-rail-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 1px; background: var(--color-border-muted); } .home-mailroom-station { position: relative; justify-self: center; width: 11px; height: 11px; border-radius: 50%; } .home-mailroom-station-recv { background: var(--color-mail-receive); } .home-mailroom-station-mid { background: var(--color-feature-tracking); } .home-mailroom-station-done { width: 13px; height: 13px; background: var(--color-bg-base); border: 2px solid var(--color-success); }   .home-mailroom-station-off { width: 9px; height: 9px; border-radius: 2px; rotate: 45deg; background: var(--color-error); } .home-mailroom-station-off.is-zero { background: var(--color-border-muted); }   .home-mailroom-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 4px 0; } .home-mailroom-labels.is-4 { grid-template-columns: repeat(4, 1fr); } .home-mailroom-label { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; } .home-mailroom-label.is-clickable { cursor: pointer; } .home-mailroom-label-title { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); } .home-mailroom-label-link { font-size: 10px; font-weight: 600; } .home-mailroom-link-recv { color: var(--color-mail-receive); } .home-mailroom-link-track { color: var(--color-feature-tracking); } .home-mailroom-link-off { color: var(--color-error); } .home-mailroom-label-sub { font-size: 10px; color: var(--color-text-tertiary); }   .home-mailroom-periods { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0 0; } .home-mailroom-period { padding: 4px 12px; border-radius: 9999px; border: 1px solid var(--color-border-default); font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); cursor: pointer; } .home-mailroom-period:hover { background: var(--color-bg-sunken); } .home-mailroom-period.is-on { background: var(--color-mail-receive-surface); border-color: var(--color-mail-receive); color: var(--color-mail-receive-dark); }   .home-mailroom-prog { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 8px 12px; border-radius: 9px; background: var(--color-bg-sunken); font-size: 11px; color: var(--color-text-secondary); } .home-mailroom-prog-stage { flex: none; padding: 1px 7px; border-radius: 9999px; border: 1px solid currentColor; font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); } .home-mailroom-prog-text { flex: 1 1 auto; } .home-mailroom-prog-rest { flex: none; font-size: 10px; color: var(--color-text-tertiary); }   .home-mailroom-prog-k1, .home-mailroom-prog-k4 { background: var(--color-mail-receive-surface); } .home-mailroom-prog-k1 .home-mailroom-prog-stage, .home-mailroom-prog-k4 .home-mailroom-prog-stage { color: var(--color-mail-receive-dark); } .home-mailroom-prog-k2 { background: var(--color-warning-surface); } .home-mailroom-prog-k2 .home-mailroom-prog-stage { color: var(--color-warning-dark); } .home-mailroom-prog-k3 { background: var(--color-error-surface); } .home-mailroom-prog-k3 .home-mailroom-prog-stage { color: var(--color-error); } .home-mailroom-flowhint { margin: 12px 0 0; text-align: center; font-size: 10px; color: var(--color-text-tertiary); } .home-mailroom-failpill { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 9999px; background: var(--color-error-surface); color: var(--color-error); font-size: 11px; font-weight: 600; cursor: pointer; }   .home-receipt-panel { margin: 0 0 12px; border: 1px solid var(--color-mail-receive); border-radius: 12px; background: var(--color-bg-base); overflow: hidden; } .home-receipt-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; } .home-receipt-title { font-size: 11px; font-weight: bold; color: var(--color-text-primary); } .home-receipt-sub { font-size: 11px; color: var(--color-text-tertiary); } .home-receipt-close { margin-left: auto; padding: 2px 6px; font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); cursor: pointer; } .home-receipt-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--color-border-default); } .home-receipt-tab { position: relative; padding: 4px 2px 6px; font-size: 11px; font-weight: 600; color: var(--color-text-primary); cursor: pointer; border-bottom: 2px solid transparent; } .home-receipt-tab.is-on { border-bottom-color: var(--color-mail-receive); } .home-receipt-tab-failed.is-on { border-bottom-color: var(--color-warning-dark, var(--color-warning)); } .home-receipt-tab-badge { margin-left: 6px; padding: 0 6px; border-radius: 9999px; font-size: 10px; font-weight: bold; background: var(--color-warning-surface); color: var(--color-warning-dark, var(--color-warning)); } .home-receipt-loading { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 20px 16px 16px; font-size: 11px; color: var(--color-text-secondary); } .home-receipt-row { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--color-border-muted); cursor: pointer; } .home-receipt-row.is-static { cursor: default; } .home-receipt-row:hover:not(.is-static) { background: var(--color-bg-sunken); } .home-receipt-date { width: 112px; flex-shrink: 0; font-size: 10px; color: var(--color-text-tertiary); } .home-receipt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .home-receipt-file { font-size: 11px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-receipt-sender { font-size: 10px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-receipt-to { max-width: 120px; flex-shrink: 0; font-size: 10px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-receipt-open { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--color-mail-receive); } .home-receipt-empty { margin: 14px 16px; text-align: center; font-size: 11px; color: var(--color-text-tertiary); } .home-receipt-failnote { margin: 10px 16px 4px; padding: 8px 12px; border-radius: 8px; background: var(--color-warning-surface); color: var(--color-warning-dark, var(--color-warning)); font-size: 10px; } .home-receipt-foot { display: flex; justify-content: flex-end; padding: 10px 16px; } .home-receipt-openhub { font-size: 11px; font-weight: 600; color: var(--color-mail-receive); cursor: pointer; }   .home-mailcta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .home-mailcta { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border-radius: 12px; border: 1.5px solid; } .home-mailcta-recv { background: var(--color-mail-receive-surface); border-color: var(--color-mail-receive); } .home-mailcta-send { background: var(--color-feature-tracking-surface); border-color: var(--color-feature-tracking); } .home-mailcta-title { font-size: 14px; font-weight: bold; } .home-mailcta-recv .home-mailcta-title { color: var(--color-mail-receive); } .home-mailcta-send .home-mailcta-title { color: var(--color-feature-tracking); } .home-mailcta-desc { margin: 4px 0 12px; font-size: 11px; color: var(--color-text-secondary); } .home-mailcta-btn { padding: 9px 18px; border: none; border-radius: 6px; color: var(--color-text-on-primary); font-size: 14px; font-weight: 600; cursor: pointer; } .home-mailcta-btn-recv { background: var(--color-mail-receive); } .home-mailcta-btn-send { background: var(--color-feature-tracking); }   .home-mailset-panel { margin: 0 0 12px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); overflow: hidden; } .home-mailset-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; } .home-mailset-title { font-size: 11px; font-weight: bold; color: var(--color-text-primary); } .home-mailset-sub { font-size: 11px; color: var(--color-text-tertiary); } .home-mailset-chevron { margin-left: auto; font-size: 11px; color: var(--color-text-tertiary); } .home-mailset-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border-default); } .home-mailset-key { width: 140px; flex-shrink: 0; font-size: 11px; color: var(--color-text-tertiary); } .home-mailset-val { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-text-primary); word-break: break-all; } .home-mailset-change { flex-shrink: 0; padding: 4px 2px; font-size: 11px; font-weight: 600; color: var(--color-mail-receive); cursor: pointer; }   .home-mailrecent-head { display: flex; align-items: center; margin: 2px 0 10px; } .home-mailrecent-title { font-size: 14px; font-weight: bold; color: var(--color-text-primary); } .home-mailrecent-sub { margin-left: auto; font-size: 11px; color: var(--color-text-tertiary); } .home-mailrecent-card { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px 8px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: var(--color-bg-elevated); cursor: pointer; } .home-mailrecent-thumb { width: 46px; height: 58px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); font-size: 11px; font-weight: bold; color: var(--color-text-tertiary); } .home-mailrecent-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .home-mailrecent-line { display: flex; align-items: center; gap: 7px; min-width: 0; } .home-mailrecent-pill { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; } .home-mailrecent-pill.is-recv { background: var(--color-mail-receive-surface); color: var(--color-mail-receive); } .home-mailrecent-pill.is-send { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .home-mailrecent-new { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; background: var(--color-primary); color: var(--color-text-on-primary); } .home-mailrecent-subject { font-size: 14px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-mailrecent-meta, .home-mailrecent-project { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-mailrecent-meta { color: var(--color-text-secondary); } .home-mailrecent-project { color: var(--color-text-tertiary); } .home-mailrecent-done, .home-mailrecent-status { flex-shrink: 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; } .home-mailrecent-done { background: var(--color-mail-receive-surface); color: var(--color-mail-receive); } .home-mailrecent-status { background: var(--color-bg-sunken); color: var(--color-text-tertiary); }   .home-mailact { display: flex; flex-direction: column; margin: 0 0 12px; padding: 16px 18px; border: 1px solid var(--color-mail-receive); border-radius: 12px; background: var(--color-mail-receive-surface); } .home-mailact-title { font-size: 14px; font-weight: bold; color: var(--color-text-primary); } .home-mailact-desc { margin: 3px 0 12px; font-size: 11px; color: var(--color-text-secondary); } .home-mailact-step { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: 10px; background: transparent; } .home-mailact-step.is-primary { border-color: var(--color-mail-receive); background: var(--color-bg-elevated); } .home-mailact-num { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-mail-receive); border-radius: 50%; font-size: 11px; font-weight: bold; color: var(--color-mail-receive); } .home-mailact-num.is-muted { border-color: var(--color-text-tertiary); color: var(--color-text-tertiary); } .home-mailact-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .home-mailact-step-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .home-mailact-step-sub { margin-top: 2px; font-size: 11px; color: var(--color-text-secondary); } .home-mailact-ghost { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--color-border-default); border-radius: 6px; background: transparent; color: var(--color-text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; } .home-mailact-tourlink { align-self: flex-start; margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--color-mail-receive); cursor: pointer; } .home-mailsample-lead { margin: 0 0 8px 2px; font-size: 11px; color: var(--color-text-tertiary); } .home-mailsample { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; padding: 8px 10px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: var(--color-bg-elevated); opacity: 0.85; } .home-mailsample-thumb { width: 46px; height: 58px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); font-size: 11px; font-weight: bold; color: var(--color-text-tertiary); } .home-mailsample-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .home-mailsample-line { display: flex; align-items: center; gap: 7px; } .home-mailsample-tag { padding: 1px 6px; border-radius: 4px; background: var(--color-bg-sunken); font-size: 11px; font-weight: bold; color: var(--color-text-tertiary); } .home-mailsample-subject { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .home-mailsample-meta { margin-top: 2px; font-size: 11px; color: var(--color-text-secondary); } .home-mailsample-state { flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: var(--color-mail-receive-surface); color: var(--color-mail-receive); font-size: 11px; font-weight: 600; }   .home-minitour { display: flex; flex-direction: column; max-width: 284px; margin: 0 0 12px; padding: 14px 15px; border: 1px solid var(--color-feature-tracking); border-radius: 12px; background: var(--color-bg-elevated); }   .home-minitour.is-anchored { position: fixed;   z-index: 1150; margin: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .home-minitour-step { font-size: 11px; font-weight: bold; color: var(--color-text-tertiary); } .home-minitour-title { margin: 2px 0 4px; font-size: 14px; font-weight: bold; color: var(--color-text-primary); } .home-minitour-body { font-size: 11px; color: var(--color-text-secondary); } .home-minitour-foot { display: flex; align-items: center; margin-top: 13px; } .home-minitour-dots { display: inline-flex; gap: 5px; } .home-minitour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-feature-tracking); opacity: 0.28; } .home-minitour-dot.is-on { opacity: 1; } .home-minitour-actions { margin-left: auto; display: inline-flex; gap: 7px; } .home-minitour-close { padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 7px; background: transparent; color: var(--color-text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; } .home-minitour-next { padding: 6px 13px; border: none; border-radius: 7px; background: var(--color-feature-tracking); color: var(--color-text-on-primary); font-size: 11px; font-weight: bold; cursor: pointer; }   @media (max-width: 640px) { .home-mailcta-row { grid-template-columns: 1fr; } }     .persona-fr-overlay { position: fixed; inset: 0; z-index: var(--z-skip); display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.376);   outline: none; overflow-y: auto; }   .persona-fr-sheet { width: 820px;   max-width: 100%; border: 1px solid var(--color-border-default); border-radius: 22px; background: var(--color-bg-base);   overflow: hidden; animation: persona-fr-in var(--duration-normal) var(--ease-spring); } @keyframes persona-fr-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }   .persona-fr-hero { position: relative; overflow: hidden;   background: linear-gradient(to bottom right, var(--color-feature-timelog), var(--color-primary)); } .persona-fr-blob { position: absolute; border-radius: 50%; background: var(--color-text-on-primary); pointer-events: none; } .persona-fr-blob-a { width: 200px; height: 200px; top: -92px; right: -50px; opacity: 0.16; } .persona-fr-blob-b { width: 112px; height: 112px; bottom: -72px; right: 52px; opacity: 0.11; } .persona-fr-hero-body { position: relative; padding: 22px 26px 20px; } .persona-fr-space { display: flex; align-items: center; margin-bottom: 11px; } .persona-fr-space-plate { width: 21px; height: 21px; flex: 0 0 auto; margin-right: 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.267);   color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; } .persona-fr-space-name { color: rgba(255, 255, 255, 0.941);   font-size: var(--font-2xs); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .persona-fr-title { margin: 0 0 6px; color: var(--color-text-on-primary); font-size: var(--font-xl); font-weight: var(--weight-bold); line-height: 1.32; } .persona-fr-sub { margin: 0; color: rgba(255, 255, 255, 0.902);   font-size: var(--font-xs); line-height: 20px; } .persona-fr-sub strong { font-weight: var(--weight-bold); } .persona-fr-body { padding: 18px 22px 16px; }   .persona-fr-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; } .persona-fr-card { position: relative; overflow: hidden;   border: 1.5px solid var(--color-border-default); border-radius: 15px; background: var(--color-bg-base); cursor: pointer; }   .persona-fr-card:hover:not(.is-on) { background: var(--color-bg-elevated); } .persona-fr-card-mail:hover:not(.is-on) { border-color: var(--color-feature-tracking-accent); } .persona-fr-card-full:hover:not(.is-on), .persona-fr-card-reply:hover:not(.is-on) { border-color: var(--color-feature-message); } .persona-fr-card-mail:hover:not(.is-on) .persona-fr-radio { border-color: var(--color-feature-tracking-accent); } .persona-fr-card-full:hover:not(.is-on) .persona-fr-radio, .persona-fr-card-reply:hover:not(.is-on) .persona-fr-radio { border-color: var(--color-feature-message); }   .persona-fr-card.is-on { border-width: 2px; } .persona-fr-card-mail.is-on { border-color: var(--color-feature-tracking-accent); background: var(--color-feature-tracking-surface); } .persona-fr-card-full.is-on, .persona-fr-card-reply.is-on { border-color: var(--color-feature-message); background: var(--color-feature-message-surface); }   .persona-fr-ribbon { display: block; height: 4px; } .persona-fr-card-mail .persona-fr-ribbon { background: linear-gradient(to right, var(--color-warning) 0%, var(--color-feature-tracking-accent) 50%, var(--color-feature-pin) 100%); } .persona-fr-card-full .persona-fr-ribbon { background: linear-gradient(to right, var(--color-feature-task) 0%, var(--color-feature-message) 50%, var(--color-feature-contact) 100%); }   .persona-fr-card-reply .persona-fr-ribbon { background: var(--color-feature-message); }   .persona-fr-head { display: flex; align-items: center; padding: 14px 15px 13px; } .persona-fr-card-mail .persona-fr-head { background: linear-gradient(to bottom, var(--color-warning-surface) 0%, var(--color-bg-base) 92%); } .persona-fr-card-full .persona-fr-head, .persona-fr-card-reply .persona-fr-head { background: linear-gradient(to bottom, var(--color-feature-message-surface) 0%, var(--color-bg-base) 92%); }   .persona-fr-art { flex: 0 0 auto; margin-right: 13px; overflow: visible; } .persona-fr-head-text { min-width: 0; } .persona-fr-card-title { display: block; margin-bottom: 3px; color: var(--color-text-primary); font-size: var(--font-sm); font-weight: var(--weight-bold); } .persona-fr-card-desc { display: block; color: var(--color-text-secondary); font-size: var(--font-2xs); line-height: 17px; }   .persona-fr-lines { padding: 11px 15px 13px; border-top: 1px solid var(--color-border-default); } .persona-fr-lines-head { display: block; margin-bottom: 8px; color: var(--color-text-tertiary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .persona-fr-line { display: flex; align-items: center; margin-bottom: 7px; }   .persona-fr-plate { width: 21px; height: 21px; flex: 0 0 auto; margin-right: 8px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } .persona-fr-plate.is-tracking { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .persona-fr-plate.is-message { background: var(--color-feature-message-surface); color: var(--color-feature-message); } .persona-fr-plate.is-task { background: var(--color-feature-task-surface); color: var(--color-feature-task); } .persona-fr-plate.is-file { background: var(--color-primary-surface); color: var(--color-feature-file); } .persona-fr-plate.is-timelog { background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); } .persona-fr-line-text { min-width: 0; flex: 1 1 auto; color: var(--color-text-primary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .persona-fr-line-note { flex: 0 0 auto; margin-left: 8px; color: var(--color-text-tertiary); font-size: var(--font-2xs); }   .persona-fr-more { display: inline-block; margin-top: 3px; padding: 5px 9px; border-radius: 8px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .persona-fr-more.is-mail { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking-accent); } .persona-fr-more.is-full, .persona-fr-more.is-reply { background: var(--color-feature-message-surface); color: var(--color-feature-message); }   .persona-fr-radio { position: absolute; top: 13px; right: 13px; width: 23px; height: 23px; border: 1.6px solid var(--color-text-tertiary); border-radius: 11.5px; background: transparent; display: inline-flex; align-items: center; justify-content: center; } .persona-fr-radio.is-warn { border-color: var(--color-warning); } .persona-fr-radio.is-nudge { animation: persona-fr-pulse 420ms linear; } @keyframes persona-fr-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .persona-fr-radio.is-nudge { animation: none; } .persona-fr-sheet { animation: none; } .persona-coach-ring { animation: none; } .persona-coach-bubble { animation: none; } } .persona-fr-check { color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); visibility: hidden; } .persona-fr-card.is-on .persona-fr-check { visibility: visible; } .persona-fr-card-mail.is-on .persona-fr-radio { border-color: var(--color-feature-tracking-accent); background: var(--color-feature-tracking-accent); } .persona-fr-card-full.is-on .persona-fr-radio, .persona-fr-card-reply.is-on .persona-fr-radio { border-color: var(--color-feature-message); background: var(--color-feature-message); }   .persona-fr-band { display: flex; margin-top: 13px; padding: 11px 13px; border-radius: 12px; } .persona-fr-hint { align-items: center; border: 1px solid var(--color-warning); background: var(--color-warning-surface); } .persona-fr-assurance { align-items: flex-start; background: var(--color-primary-surface); } .persona-fr-band-mark { width: 21px; height: 21px; flex: 0 0 auto; margin-right: 10px; border-radius: 50%; background: var(--color-warning); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; } .persona-fr-band-mark.is-primary { width: 19px; height: 19px; margin-top: 1px; background: var(--color-primary); }   .persona-fr-hint-text { color: var(--color-warning-on-surface); font-size: var(--font-xs); font-weight: var(--weight-bold); line-height: 18px; } .persona-fr-assurance-text { color: var(--color-text-primary); font-size: var(--font-2xs); line-height: 18px; } .persona-fr-assurance-text strong { color: var(--color-primary-on-surface); font-weight: var(--weight-bold); } .persona-fr-footer { margin-top: 14px; } .persona-fr-footer-line { display: block; height: 1px; margin-bottom: 12px; background: var(--color-border-default); } .persona-fr-footer-row { display: flex; align-items: center; gap: 12px; } .persona-fr-skip { flex: 1 1 auto; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .persona-fr-start { flex: 0 0 auto; padding: 8px 20px; border: none; border-radius: 8px; background: linear-gradient(to bottom right, var(--color-feature-timelog), var(--color-primary)); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); cursor: pointer; }   @media (max-width: 640px) { .persona-fr-choices { grid-template-columns: 1fr; } .persona-fr-footer-row { flex-wrap: wrap; } }     .persona-coach { position: absolute;   inset: -1px; z-index: var(--z-popover); outline: none; }   .persona-coach-catch { position: fixed; inset: 0; }   .persona-coach-ring { position: absolute; inset: -5px; border: 2px solid var(--color-primary); border-radius: 12px; box-shadow: 0 0 7px color-mix(in srgb, var(--color-primary) 50%, transparent); pointer-events: none; animation: persona-coach-in 200ms var(--ease-default) both; }   .persona-coach-bubble { position: absolute; top: calc(100% + 12px); right: 0; width: 250px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; align-items: flex-start; padding: 12px 15px; border-radius: 12px; background: var(--color-feature-tracking-deep);   box-shadow: var(--shadow-tooltip); animation: persona-coach-in 200ms var(--ease-default) 200ms both; } @keyframes persona-coach-in { from { opacity: 0; } to { opacity: 1; } } .persona-coach-title { margin-bottom: 4px; color: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-bold); } .persona-coach-body { margin-bottom: 11px; color: var(--color-bg-base); font-size: var(--font-2xs); line-height: 17px; opacity: 0.82; }   .persona-coach-ok { padding: 6px 13px; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); cursor: pointer; }     .login-newspace { max-width: 420px; margin: 16px auto 0; } .login-newspace-sep { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .login-newspace-sep::before, .login-newspace-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); } .login-newspace-sep span { font-size: var(--font-xs); color: var(--color-text-tertiary); } .login-newspace-lead { margin: 0 0 10px; font-size: var(--font-xs); color: var(--color-text-secondary); text-align: center; } .login-newspace-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 40px; padding: 9px 14px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .login-newspace-btn:hover { background: var(--color-primary-surface); border-color: var(--color-primary); }   .spc-panel { max-width: 520px; padding: 28px 30px 24px; } .spc-form { margin-top: 20px; } .spc-label { display: block; margin: 0 0 6px; } .spc-form .spc-label + .spc-label, .spc-form > .spc-label:not(:first-child) { margin-top: 16px; } .spc-input { width: 100%; min-height: 36px; padding: 8px 10px; 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-base); } .spc-input:focus { outline: none; border-color: var(--color-primary); } .spc-input::placeholder { color: var(--color-text-tertiary); }   .spc-code-notice { display: flex; gap: 10px; align-items: center; margin: 18px 0 10px; padding: 12px; border: 2px solid var(--color-branch-purple); border-radius: var(--radius-md); background: var(--color-bg-elevated); } .spc-code-notice-ic { font-size: 16px; line-height: 1; } .spc-code-notice-title { margin: 0; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-branch-purple); } .spc-code-notice-sub { margin: 2px 0 0; font-size: var(--font-xs); color: var(--color-text-secondary); }   .spc-code-row { display: flex; gap: 8px; align-items: center; } .spc-code-row .spc-input { flex: 1 1 auto; min-width: 0; }   .spc-code-row .login-btn { flex: 0 0 auto; width: auto; min-width: 96px; margin: 0; }   .spc-pw-row { position: relative; } .spc-input-pw { padding-right: 54px; } .spc-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border: 0; background: none; cursor: pointer; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .spc-caps { margin: 4px 0 0; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-warning-on-surface); } .spc-pw-hint { margin: 6px 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); } .spc-pw-error { margin: 6px 0 0; text-align: left; } .spc-error { margin: 14px 0 0; text-align: left; } .spc-notice { margin: 14px 0 0; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: pre-line; }   .spc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; } .spc-actions .login-btn { width: auto; min-width: 120px; margin: 0; } .spc-btn-secondary { background: var(--color-bg-base); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } .spc-btn-secondary:hover { background: var(--color-bg-elevated); } .spc-btn-primary:disabled { opacity: .5; cursor: default; }   .spc-overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(20, 40, 30, .45); } .spc-overlay-card { max-width: 380px; padding: 28px 32px; text-align: center; background: var(--color-bg-base); border-radius: 16px; } .spc-overlay-card .sp-spinner { margin: 0 auto; } .spc-overlay-title { margin: 16px 0 0; font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .spc-overlay-msg { margin: 6px 0 0; font-size: var(--font-xs); color: var(--color-text-secondary); }   .wlc-panel { max-width: 720px; width: 100%; padding: 0; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }   .wlc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 32px 40px 16px; } .wlc-title { margin: 0; font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--color-text-primary); } .wlc-sub { margin: 4px 0 0; font-size: var(--font-sm); color: var(--color-text-secondary); } .wlc-cancel { font-size: var(--font-xs); color: var(--color-text-tertiary); text-decoration: underline; }   .wlc-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 40px 16px; } .wlc-section-title { margin: 28px 0 6px; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .wlc-body > .wlc-section-title:first-child { margin-top: 8px; } .wlc-section-sub { margin: 0 0 8px; font-size: var(--font-sm); color: var(--color-text-secondary); }   .wlc-industry-group { margin: 4px 0 12px; } .wlc-group-title { margin: 8px 0; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .wlc-industry-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wlc-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-primary-on-surface); } .wlc-tile:hover { background: var(--color-bg-elevated); } .wlc-tile-on { border-color: var(--color-primary); background: var(--color-primary-surface); } .wlc-tile-label { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); text-align: center; } .wlc-code-hint { margin: 8px 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .wlc-avatar-preview { width: 56px; height: 56px; margin: 4px 0 8px; border-radius: 50%; border: 3px solid var(--color-primary); overflow: hidden; display: flex; align-items: center; justify-content: center; } .wlc-avatar-preview-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .wlc-avatar-list { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0; } .wlc-avatar-item { flex: 0 0 auto; padding: 2px; border: 0; background: none; cursor: pointer; border-radius: 22px; line-height: 0; } .wlc-avatar-item:hover { background: var(--color-bg-elevated); } .wlc-avatar-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .wlc-avatar-item-on { box-shadow: inset 0 0 0 2px var(--color-primary); } .wlc-avatar-upload { position: relative; display: inline-block; margin-top: 12px; } .wlc-avatar-upload .login-btn { width: auto; min-width: 0; margin: 0; } .wlc-avatar-upload-plus { margin-right: 6px; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); }   .wlc-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--font-sm); color: var(--color-text-primary); cursor: pointer; }   .wlc-foot { flex: 0 0 auto; padding: 16px 40px 20px; text-align: right; border-top: 1px solid var(--color-border-default); background: var(--color-bg-base); } .wlc-foot .login-btn { width: auto; min-width: 160px; min-height: 44px; margin: 0; }   .ucs-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay-black-60); } .ucs-overlay { position: fixed; top: 50%; left: 50%; z-index: var(--z-modal); transform: translate(-50%, -50%); width: 650px; max-width: calc(100vw - 48px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .ucs-overlay-head { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .ucs-overlay-title { flex: 1 1 auto; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .ucs-overlay-close, .ucs-manager-close, .ucs-config-close, .ucs-config-delete { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; } .ucs-overlay-close { width: 32px; height: 32px; } .ucs-overlay-close, .ucs-manager-close, .ucs-config-close { border-radius: var(--radius-md); color: var(--color-text-secondary); } .ucs-manager-close, .ucs-config-close { width: 24px; height: 24px; }   .ucs-config-delete { width: 24px; height: 24px; border-radius: var(--radius-full); color: var(--color-text-tertiary); } .ucs-overlay-close:hover, .ucs-manager-close:hover, .ucs-config-close:hover, .ucs-config-delete:hover { background: var(--color-primary-surface); }   .ucs-manager-host { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; place-items: center; padding: 16px; background: var(--color-overlay-black-30); } .ucs-manager, .ucs-config-backdrop, .ucs-config { grid-area: 1 / 1; } .ucs-manager { max-width: 100%; padding: 10px 20px; border: 5px solid rgba(211, 211, 211, 0.4);   border-radius: 10px; background: var(--color-bg-base); } .ucs-manager-top { display: flex; flex-direction: column; } .ucs-manager-close { align-self: flex-end; } .ucs-manager-heading { display: flex; align-items: flex-start; gap: 10px; } .ucs-manager-heading-icon { width: 32px; height: 32px; color: var(--color-text-tertiary); flex: 0 0 auto; } .ucs-manager-heading-text { margin-top: 5px; font-size: var(--font-xl); font-weight: 700; color: var(--color-text-primary); } .ucs-manager-desc { margin: 10px 0 15px; white-space: pre-line; font-size: var(--font-xs); color: var(--color-text-tertiary); } .ucs-manager-empty { margin: 0 0 10px; white-space: pre-line; color: var(--color-text-primary); } .ucs-manager-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; } .ucs-manager-item { display: flex; align-items: center; width: 516px; max-width: 100%; height: 36px; padding: 3px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; } .ucs-manager-item:hover { background: var(--color-primary-surface); } .ucs-manager-item-text { display: flex; flex-direction: column; min-width: 0; margin-left: 5px; } .ucs-manager-item-title { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-sm); color: var(--color-text-primary); } .ucs-manager-item-org { width: 12px; height: 12px; color: var(--color-text-tertiary); flex: 0 0 auto; } .ucs-manager-item-path { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-xs); color: var(--color-text-tertiary); } .ucs-manager-actions { display: flex; margin-top: 5px; } .ucs-manager-actions .btn-primary { margin: 5px; }   .ucs-avatar { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .ucs-avatar img { width: 100%; height: 100%; object-fit: cover; } .ucs-avatar-star { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--color-super-dark-green); } .ucs-avatar-sm { width: 20px; height: 20px; margin: 5px; } .ucs-avatar-sm img { border-radius: 5px; } .ucs-avatar-sm .ucs-avatar-star { width: 18px; height: 18px; } .ucs-avatar-lg { width: 100px; height: 100px; border-radius: 15px; } .ucs-avatar-lg img { border-radius: 5px; } .ucs-avatar-edit { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: var(--color-bg-base); color: var(--color-text-tertiary); cursor: pointer; overflow: hidden; } .ucs-avatar-edit:hover { background: var(--color-primary-surface); }   .ucs-avatar-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }   .ucs-config-backdrop { align-self: stretch; justify-self: stretch; margin: -16px; background: var(--color-overlay-black-30); } .ucs-config { position: relative; width: 400px; max-width: 100%; border: 3px solid rgba(211, 211, 211, 0.4);   border-radius: 5px; background: var(--color-bg-base); } .ucs-config-head { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 4px 4px 0 0; background: var(--color-primary-light); } .ucs-config-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 5px 20px 2px; } .ucs-config-kicker { font-size: var(--font-3xs); color: var(--color-text-tertiary); } .ucs-config-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); } .ucs-config-body { display: flex; flex-direction: column; padding: 10px 20px; } .ucs-config-label { margin-top: 20px; font-size: var(--font-xs); font-weight: 700; color: var(--color-text-tertiary); } .ucs-config-input { height: 22px; padding: 0 4px; border: 1px solid var(--color-border-default); font-size: var(--font-sm); color: var(--color-text-primary); background: var(--color-bg-base); } .ucs-config-body .ucs-avatar-lg { margin-top: 4px; } .ucs-config-footer { display: flex; justify-content: flex-end; margin: 20px 0 10px 20px; }   .home-m, .home-m-todos { display: none; }     .home-branch-location-off { margin-left: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .home-branch-map-btn { margin-left: 8px; } .home-branch-map-btn.is-first { margin-left: auto; }   .home-branch-name-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .home-branch-staff-count { font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-on-surface); }   .home-member-branch { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-member-branch-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .home-member-location-notice { display: flex; align-items: flex-start; gap: 3px; margin-top: 3px; font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: normal; } .home-member-location-notice svg { flex-shrink: 0; margin-top: 2px; }   .staff-location-map { position: relative; height: 100%; min-height: 420px; } .staff-location-map-canvas { width: 100%; height: 100%; min-height: 420px; }   .home-persona-seg-beta.is-on { background: var(--color-primary-surface); color: var(--color-primary-dark); } .home-beta { max-width: 880px; margin: 0 auto var(--space-6); padding: 0 var(--space-6); } .home-beta-brief, .home-beta-queue { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .home-beta-brief { margin-top: var(--space-4); } .home-beta-queue { margin-top: var(--space-5); } .home-beta-brief-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .home-beta-brief-head svg { color: var(--color-primary-on-surface); } .home-beta-brief ul, .home-beta-rows { list-style: none; margin: 0; padding: 0; } .home-beta-brief li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); } .home-beta-brief li + li { border-top: 1px solid var(--color-border-default); } .home-beta-chip { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); } .home-beta-chip.is-deadline { background: var(--color-error-surface); color: var(--color-error-on-surface); } .home-beta-chip.is-mail { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .home-beta-chip.is-msg { background: var(--color-info-surface); color: var(--color-info); } .home-beta-brief-text { min-width: 0; font-size: var(--font-base); color: var(--color-text-primary); overflow-wrap: anywhere; } .home-beta-brief-text b { font-weight: var(--weight-semibold); } .home-beta-brief-sub { margin-left: var(--space-2); font-size: var(--font-xs); color: var(--color-text-tertiary); } .home-beta-qhead { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); } .home-beta-qtitle-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); } .home-beta-qtitle { margin: 0; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .home-beta-lead { font-size: var(--font-sm); color: var(--color-text-secondary); } .home-beta-lead b { font-weight: var(--weight-bold); color: var(--color-text-primary); } .home-beta-pills { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; } .home-beta-pill, .home-beta-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-semibold); white-space: nowrap; background: var(--color-bg-sunken); color: var(--color-text-secondary); } .home-beta-pill.is-err, .home-beta-tag.is-err { background: var(--color-error-surface); color: var(--color-error-on-surface); } .home-beta-pill.is-warn, .home-beta-tag.is-warn { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .home-beta-tag { flex: none; } .home-beta-meter { display: flex; height: 5px; margin-top: var(--space-3); border-radius: var(--radius-full); overflow: hidden; background: var(--color-bg-sunken); } .home-beta-meter i { display: block; height: 100%; } .home-beta-meter .is-err { background: var(--color-error); } .home-beta-meter .is-warn { background: var(--color-warning); } .home-beta-meter .is-rest { background: var(--color-border-muted); opacity: .55; } .home-beta-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-default); } .home-beta-row:last-child { border-bottom: none; } .home-beta-row:hover { background: var(--color-primary-surface-light); } .home-beta-row.is-deadline { box-shadow: inset 3px 0 0 var(--color-error); } .home-beta-row.is-sorting { box-shadow: inset 3px 0 0 var(--color-warning); } .home-beta-check, .home-beta-check-space { width: 18px; height: 18px; flex: none; } .home-beta-check { padding: 0; border: 2px solid var(--color-border-muted); border-radius: var(--radius-sm); background: var(--color-bg-base); cursor: pointer; } .home-beta-check:hover { border-color: var(--color-primary); } .home-beta-av { position: relative; width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-avatar); background: var(--color-avatar-palette-indigo);   color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); } .home-beta-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .home-beta-body { flex: 1; min-width: 0; cursor: pointer; } .home-beta-l1 { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .home-beta-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-secondary); } .home-beta-when { white-space: nowrap; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-beta-subj { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .home-beta-act { flex: none; margin-left: var(--space-1); } .home-beta-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; } .home-beta-btn.is-primary { background: var(--color-primary); color: var(--color-text-on-primary); } .home-beta-btn.is-primary:hover { background: var(--color-primary-dark); } .home-beta-btn.is-secondary { background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-primary); } .home-beta-btn.is-ghost { background: transparent; color: var(--color-primary-dark); } .home-beta-qfoot { display: flex; justify-content: center; padding: var(--space-2); border-top: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .home-beta-hint { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); } @media (max-width: 760px) { .home-beta { padding: 0 var(--space-4); } .home-beta-pills { margin-left: 0; width: 100%; } .home-beta-who { max-width: 140px; } } @media (max-width: 560px) { .home-beta-row { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-3) var(--space-4); } .home-beta-check, .home-beta-check-space { grid-column: 1; grid-row: 1; } .home-beta-av { grid-column: 2; grid-row: 1; } .home-beta-body { grid-column: 3 / 5; grid-row: 1; } .home-beta-tag { grid-column: 3; grid-row: 2; justify-self: start; } .home-beta-act { grid-column: 4; grid-row: 2; justify-self: end; margin-left: 0; } .home-beta-brief li { padding: var(--space-3) var(--space-4); } .home-beta-qhead { padding: var(--space-4); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .home-dashboard > .home-beta { order: 1; } } @media (pointer: coarse) {   .home-beta-btn { min-height: 44px; } .home-beta-check { position: relative; width: 44px; height: 44px; margin: calc(-1 * var(--space-3)); border: none; background: transparent; } .home-beta-check::before { content: ""; position: absolute; inset: var(--space-3); border: 2px solid var(--color-border-muted); border-radius: var(--radius-sm); background: var(--color-bg-base); } .home-beta-check:hover::before { border-color: var(--color-primary); } }   .home-icard { margin: 0 24px 16px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; } .home-icard-head { display: flex; align-items: center; gap: var(--space-2); padding: 10px 10px 10px 14px; } .home-icard-initial { width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 11px; font-weight: var(--weight-semibold); } .home-icard-name { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-icard-badge { min-width: 18px; height: 18px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-error); color: var(--color-text-on-primary); font-size: 11px; font-weight: var(--weight-semibold); } .home-icard-spacer { flex: 1 1 auto; } .home-icard-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-tertiary); font: inherit; font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .home-icard-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .home-icard-body { border-top: 1px solid var(--color-border-default); } .home-icard-frame { display: block; width: 100%; height: 220px; border: 0; background: var(--color-bg-base); } .home-icard-muted { padding: 16px 14px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .home-icard-state { margin: 12px 14px; padding: 10px 12px; border-radius: 6px; background: var(--color-warning-surface); color: var(--color-warning-on-surface); font-size: var(--font-xs); } .home-icard-foot { display: flex; gap: var(--space-3); padding: 6px 14px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-sunken); font-size: 11px; color: var(--color-text-tertiary); }   .home-icard.is-folded .home-icard-body, .home-icard.is-folded .home-icard-foot { display: none; }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .home-icard { margin: 0 16px 12px; }   .home-dashboard > .home-icard { order: 3; flex-shrink: 0; } .home-icard-btn-long { display: none; } } 
/*css/screens/07-compose-panel.css*/
  .compose-panel { display: flex; flex-direction: column; height: 100%; background: var(--color-bg-base); } .compose-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .compose-title { display: flex; align-items: center; gap: 6px; font-size: 10pt; font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .compose-title-icon { width: 16px; height: 16px; } .compose-form { flex: 1; overflow-y: auto; padding: 0; } .compose-row { display: flex; align-items: center; padding: 8px 20px; border-bottom: 1px solid var(--color-border-default); gap: 10px; } .compose-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); width: 40px; flex-shrink: 0; text-align: right; } .compose-input { flex: 1; border: none; outline: none; font-size: var(--font-base); padding: 6px 0; color: var(--color-text-primary); font-family: inherit; } .compose-input::placeholder { color: var(--color-border-muted); } .compose-row-link { padding: 2px 16px 2px 52px; border-bottom: 1px solid var(--color-border-default); } .btn-link { background: none; border: none; color: var(--color-primary-on-surface); font-size: 8pt; cursor: pointer; padding: 0; text-decoration: underline; } .compose-type-buttons { display: flex; gap: 4px; }   .compose-attachments { padding: 6px 16px; border-bottom: 1px solid var(--color-border-default); } .compose-attachment-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .compose-attachment-chip { display: flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--color-border-default); border-radius: 12px; font-size: 8pt; color: var(--color-text-secondary); } .compose-attachment-chip img { width: 10px; height: 10px; }   .compose-body-area { flex: 1; padding: 0; } .compose-textarea { width: 100%; min-height: 200px; border: none; outline: none; resize: vertical; padding: 12px 16px; font-size: 10pt; font-family: inherit; line-height: 1.5; color: var(--color-text-secondary); } .compose-textarea::placeholder { color: var(--color-border-muted); }   .compose-quoted { border-top: 1px solid var(--color-border-default); margin: 0; }   .compose-actions { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .btn-send { display: flex; align-items: center; gap: 5px; padding: 7px 20px; background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: 5px; cursor: pointer; font-size: 11pt; font-weight: var(--weight-semibold); transition: background var(--duration-fast); } .btn-send:hover { background: var(--color-primary-light); color: var(--color-bg-base); } .btn-send:disabled { background: var(--color-border-default); color: var(--color-text-tertiary); cursor: not-allowed; } .btn-send img { width: 14px; height: 14px; } .btn-draft { display: flex; align-items: center; gap: 5px; padding: 7px 16px; background: var(--color-border-default); color: var(--color-text-secondary); border: none; border-radius: 5px; cursor: pointer; font-size: 9pt; font-weight: var(--weight-semibold); } .btn-draft:hover { background: #e8ffe0; } .btn-draft:disabled { cursor: not-allowed; opacity: 0.5; } .btn-draft img { width: 12px; height: 12px; } .compose-status { font-size: 8pt; color: var(--color-primary-on-surface); margin-left: auto; } .compose-status.error { color: var(--color-error); }     .compose-bg-inhouse { background: var(--color-primary-surface-light); border-radius: 10px; margin: 5px; } .compose-bg-email { background: var(--color-border-default); border-radius: 10px; margin: 5px; }   @media (min-width: 769px) { .compose-split-bottom:not(.compact) > .compose-panel.is-reply { margin: 0 4px 4px; border: 1.5px solid var(--color-primary); border-radius: 10px; background: var(--color-primary-surface); } .compose-split-bottom:not(.compact) > .compose-panel.is-reply.compose-bg-email { background: var(--color-bg-sunken); border-color: var(--color-text-secondary); } .compose-split-bottom:not(.compact) > .compose-panel.is-reply.is-bulletin { background: var(--color-info-surface); border-color: var(--color-info); } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-body-border { margin: 4px 10px 10px; border-color: var(--color-border-default); } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-reply-subject-row { margin: 8px 18px 2px; } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-inline-recipients { padding: 6px 14px 0; border-top: none; }   .compose-split-bottom:not(.compact):has(> .compose-panel.is-reply) { overflow: hidden; }   .message-detail-panel.composing-split:not(.compose-two-col) .compose-split-bottom:not(.compact):has(> .compose-panel.is-reply) { height: auto !important; min-height: var(--compose-bottom-min, 350px); max-height: calc(100% - 160px); display: flex; flex-direction: column; } .message-detail-panel.composing-split:not(.compose-two-col) .compose-split-bottom:not(.compact) > .compose-panel.is-reply { flex: 1 1 auto; min-height: 0; } .message-detail-panel.composing-split:not(.compose-two-col) .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-body-border, .message-detail-panel.composing-split:not(.compose-two-col) .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-body-scroll { flex: 1 1 auto; min-height: 0; } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-textarea { field-sizing: content; min-height: 120px; height: auto; flex: none; overflow: hidden; resize: none; } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-quotebar-edit { field-sizing: content; min-height: 25px; overflow: hidden; resize: none; }   @supports not (field-sizing: content) { .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-textarea { min-height: 240px; overflow-y: auto; } .compose-split-bottom:not(.compact) > .compose-panel.is-reply .compose-quotebar-edit { overflow-y: auto; } } }   .compose-reply-preview { padding: 8px 12px 0; } .reply-preview-bubble { max-width: 350px; max-height: 100px; padding: 8px; background: rgba(34, 187, 128, 0.5); border-radius: 5px; overflow: hidden; } .reply-preview-label { font-size: 8pt; font-weight: bold; color: var(--color-text-primary); } .reply-preview-body { font-size: 9pt; color: var(--color-bg-base); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; } .reply-preview-triangle { width: 0; height: 0; margin-left: 25px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 6px solid rgba(34, 187, 128, 0.5); }   .compose-body-border { margin: 8px; background: var(--color-bg-base); border: 1px solid var(--color-text-tertiary); border-radius: 4px; display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; } .compose-body-scroll { flex: 1; overflow-y: auto; }   .compose-toolbar { display: flex; align-items: center; padding: 2px 6px; gap: 2px; position: relative; } .btn-compose-tool { width: 26px; height: 26px; border: none; background: transparent; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-compose-tool:hover { background: var(--color-border-default); } .btn-compose-tool img { width: 14px; height: 14px; } .three-point-icon { font-size: 12px; font-weight: bold; color: var(--color-text-secondary); transform: rotate(90deg); display: inline-block; }   .compose-popup-menu { position: absolute; z-index: var(--z-sticky); background: var(--color-primary); border-radius: 3px; box-shadow: 0 2px 8px var(--shadow-sm); min-width: 180px; } .attachment-popup { top: 30px; left: 4px; max-height: 300px; overflow-y: auto; } .compose-popup-menu button, .compose-popup-menu .compose-popup-btn { display: flex; align-items: center; gap: 5px; width: 100%; padding: 8px 12px; background: transparent; border: none; color: var(--color-bg-base); font-size: 9pt; cursor: pointer; text-align: left; }   .compose-popup-menu .menu-key-hint { margin-left: auto; padding-left: 12px; font-size: var(--font-2xs); opacity: .75; }   .compose-keycap-hint { align-self: center; margin: 0 4px; padding: 1px 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-2xs); color: var(--color-text-disabled); opacity: .6; white-space: nowrap; } @media (pointer: coarse) { .compose-keycap-hint { display: none; } } .compose-popup-menu button:hover, .compose-popup-menu .compose-popup-btn:hover { background: var(--color-primary-muted); color: var(--color-text-primary); } .popup-separator { border-top: 0.5px solid var(--color-bg-base); margin: 0 10px; } .popup-section-label { padding: 8px 12px 2px; font-size: 8pt; color: rgba(255,255,255,0.6); } .popup-file-icon { width: 16px; height: 16px; }   .compose-attachment-list-inline { padding: 2px 12px 4px;   max-height: 200px; overflow-y: auto; } .compose-attachment-item { display: inline-flex; align-items: center; gap: 4px; margin: 2px 5px; padding: 2px 5px; border-radius: 3px; cursor: pointer; font-size: 9pt; } .compose-attachment-item:hover { background: var(--color-primary-surface); } .btn-attachment-delete { background: transparent; border: none; color: var(--color-error); cursor: pointer; font-size: 12px; padding: 0 3px; border-radius: 3px; } .btn-attachment-delete:hover { background: var(--color-border-default); } .attachment-file-icon { width: 16px; height: 16px; }   .compose-dragover-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(245, 245, 245, 0.7); display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; pointer-events: none; } .compose-dragover-overlay img { height: 14px; } .compose-dragover-overlay span { font-size: 12pt; font-weight: bold; color: var(--color-primary-on-surface); }     .compose-inline-recipients { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px; border-top: 1px solid var(--color-border-default); }   .compose-inline-recipients .recip-hidden { display: none; } .compose-inline-recipients .recip-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }     .ai-theme-suggest { padding: 4px 14px 8px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); } .ai-theme-suggest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ai-theme-suggest-title { flex: 1; font-size: var(--font-xs); color: var(--color-text-secondary); } .ai-theme-suggest-refresh { border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); padding: 2px 8px; cursor: pointer; } .ai-theme-suggest-refresh:hover:not(:disabled) { background: var(--color-primary-surface); border-color: var(--color-primary); } .ai-theme-suggest-refresh:disabled { opacity: .5; cursor: default; }   .ai-theme-suggest-title.is-blocked { display: inline-flex; align-items: center; color: var(--color-error); } .ai-theme-suggest-blocked-text { margin-left: 4px; color: var(--color-text-disabled); font-weight: var(--weight-semibold); } .ai-theme-suggest-refresh.is-blocked { opacity: .45; } .ai-theme-suggest-loading, .ai-theme-suggest-empty { font-size: var(--font-xs); color: var(--color-text-tertiary); } .ai-theme-suggest-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); cursor: pointer; text-align: left; } .ai-theme-suggest-item:hover { background: var(--color-primary-surface); border-color: var(--color-primary); } .ai-theme-suggest-name { font-weight: var(--weight-semibold); color: var(--color-text-primary); font-size: var(--font-sm); }   .compose-popup-menu.body-context-menu { position: absolute; min-width: 200px; z-index: 10; background: var(--color-bg-elevated); color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 4px; } .compose-popup-menu.body-context-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 5px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); cursor: pointer; text-align: left; } .compose-popup-menu.body-context-menu button:hover { background: var(--color-primary-surface); } .compose-popup-menu.body-context-menu .menu-gesture { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .candidate-member { display: inline-flex; align-items: center; color: var(--color-primary-on-surface); flex: 0 0 auto; } .candidate-origfield { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-xs); flex: 0 0 auto; }   .sendconf-overlay { position: fixed; inset: 0;   background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: var(--z-skip); } .sendconf-dialog { min-width: 520px; max-width: 680px;   max-height: min(760px, 100%); width: 100%; padding: 24px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; animation: sendconf-enter .22s ease-out; }   @keyframes sendconf-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sendconf-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .sendconf-header svg { width: 22px; height: 22px; flex: none; color: var(--color-feature-message); } .sendconf-title { font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sendconf-body { flex: 1; min-height: 0; overflow-y: auto; } .sendconf-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }   .sendconf-cancel { padding: 7px 14px; border: none; background: transparent; color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .sendconf-send { padding: 7px 18px; border: none; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .sendconf-send:hover { opacity: .9; } .sendconf-send:active { opacity: .8; } @media (max-width: 640px) { .sendconf-dialog { min-width: 0; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .sendconf-overlay { top: var(--topbar-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 12px; } .sendconf-dialog { padding: 18px 16px 14px; } .sendconf-footer button { min-height: 44px; } } .sendconf-section-title { margin: 12px 0 4px; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-tertiary); } .sendconf-preview-subject { font-weight: var(--weight-semibold); margin-bottom: 6px; } .sendconf-preview-body { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: var(--font-sm); color: var(--color-text-secondary); } .sendconf-theme { font-size: var(--font-sm); } .sendconf-note { font-size: var(--font-xs); color: var(--color-text-tertiary); } .sendconf-warn { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning-dark); font-size: var(--font-xs); } .sendconf-warn-sub { color: var(--color-text-tertiary); margin-top: 2px; }   .sendconf-warn-group { margin: 8px 0 4px; font-size: var(--font-2xs); font-weight: var(--weight-medium); color: var(--color-text-tertiary); } .sendconf-warn-row { margin-bottom: 6px; padding: 8px 12px; border-radius: 8px; background: var(--color-warning-surface); font-size: var(--font-sm); color: var(--color-text-primary); } .sendconf-recipients { list-style: none; margin: 0; padding: 0; } .sendconf-recipients li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: var(--font-sm); } .sendconf-badge { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-2xs); } .sendconf-badge.outside { background: var(--color-warning-surface); color: var(--color-warning-dark); }   .sendconf-gate { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--color-warning); border-radius: 8px; background: var(--color-warning-surface); } .sendconf-gate-desc { margin-bottom: 8px; font-size: var(--font-xs); color: var(--color-text-primary); } .sendconf-gate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 6px 10px; border-radius: 6px; background: var(--color-bg-base); font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; }   .sendconf-rgroup { display: inline-block; margin: 6px 0 4px; padding: 3px 8px; border-radius: 6px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .sendconf-rgroup.to { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .sendconf-rgroup.cc { background: var(--color-info-surface); color: var(--color-info); } .sendconf-rgroup.unspecified { background: var(--color-warning-surface); color: var(--color-warning-dark); } .sendconf-rname { font-weight: var(--weight-medium); color: var(--color-text-primary); } .sendconf-raddr { font-size: var(--font-xs); color: var(--color-text-tertiary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sendconf-badge.self { background: var(--color-bg-sunken); color: var(--color-text-secondary); }   .sendconf-role { display: inline-flex; margin-left: auto; flex-shrink: 0; } .sendconf-role button { padding: 2px 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .sendconf-role button + button { border-left: none; } .sendconf-role button:first-child { border-radius: 6px 0 0 6px; } .sendconf-role button:last-child { border-radius: 0 6px 6px 0; } .sendconf-role button.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); } .sendconf-norecipient { margin: 8px 0 0; font-size: var(--font-sm); color: var(--color-error); } .compose-theme-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); }   .compose-subject-row { display: flex; align-items: center; gap: 6px; margin: 4px 8px 8px 4px; } .compose-subject-icon { color: var(--color-text-tertiary); flex: 0 0 auto; } .compose-subject-input { flex: 1 1 auto; min-width: 0; padding: 4px 2px; border: none; border-bottom: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-primary); font-size: var(--font-md); } .compose-subject-input:focus { outline: none; border-bottom-color: var(--color-primary); } .recipient-tag { position: relative;   display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: var(--color-primary); color: var(--color-bg-base); border-radius: 3px; font-size: 8pt; } .btn-tag-remove { background: none; border: none; color: var(--color-bg-base); cursor: pointer; font-size: 10px; padding: 0 2px; opacity: 0.7; } .btn-tag-remove:hover { opacity: 1; }   .btn-add-recipient { background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 5px; font-size: var(--font-xs); height: 20px; padding: 0 4px; margin-left: 10px; cursor: pointer; opacity: 0.5; line-height: 1; } .btn-add-recipient:hover { opacity: 0.8; } .btn-add-recipient.is-sub { background: var(--color-bg-sunken); color: var(--color-text-tertiary); opacity: 1; } .btn-add-recipient.is-sub:hover { color: var(--color-text-secondary); }   .inline-autocomplete-wrapper { position: relative; display: inline-block; } .inline-recipient-input { border: none; border-bottom: 1px solid var(--color-text-tertiary); outline: none; font-size: 9pt; background: var(--color-bg-sunken); padding: 2px 4px; width: 160px; } .autocomplete-dropdown { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 4px; box-shadow: 0 2px 8px var(--shadow-sm); min-width: 280px; max-height: 200px; overflow-y: auto; } .autocomplete-item { display: flex; align-items: center; gap: 5px; width: 100%; padding: 6px 10px; border: none; background: transparent; cursor: pointer; font-size: 9pt; text-align: left; } .autocomplete-item:hover, .autocomplete-item.is-selected {   background: var(--color-primary-surface-light); } .candidate-avatar { width: 23px; height: 23px;   border-radius: var(--radius-avatar); background: var(--color-primary); color: var(--color-bg-base); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-semibold); flex-shrink: 0; } .candidate-avatar-img { width: 23px; height: 23px; border-radius: var(--radius-avatar); object-fit: cover; flex-shrink: 0; }   .autocomplete-group { padding: 5px 10px 2px; border-top: 1px solid var(--color-border-default); margin-top: 1px; } .autocomplete-group.is-first { border-top: none; margin-top: 0; } .autocomplete-group-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); }   .autocomplete-item.is-member-original { background: var(--color-primary-surface); } .autocomplete-item.is-original { background: var(--color-bg-sunken); }   .candidate-fulladdress { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .candidate-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }   .compose-suggestions { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; min-width: 0; }   .suggestion-loading-text { font-size: var(--font-xs); color: var(--color-text-tertiary); align-self: flex-start; padding: 2px 0; } .btn-suggestion-chip { display: block; width: 100%; padding: 9px 12px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 6px; cursor: pointer; font-size: var(--font-xs); line-height: 20px; color: var(--color-text-primary); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; } .btn-suggestion-chip:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); } .btn-suggestion-chip:active { background: var(--color-primary); }   .compose-panel .compose-textarea { width: 100%; min-height: 80px; border: none; outline: none; resize: none; padding: 8px 18px 12px; font-size: 10pt; font-family: inherit; line-height: 1.7; color: var(--color-text-secondary); }   .compose-signature { padding: 0 18px 8px; color: var(--color-text-tertiary); font-size: 9pt; white-space: pre-wrap; border-top: 1px solid var(--color-border-default); margin-top: 4px; }   .compose-bottom-menu { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-top: 1px solid var(--color-border-default); min-height: 50px; }       .response-limit-caret { border: none; background: transparent; color: var(--color-primary-on-surface); cursor: pointer; padding: 0 2px; font-size: var(--font-xs); line-height: 1; } .response-limit-caret:hover { color: var(--color-primary-dark); } .compose-templates-area { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }   .compose-bottom-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .response-limit-toggle-area { display: flex; align-items: center; gap: 5px; } .response-limit-icon { width: 15px; height: 15px; } .response-limit-time { font-size: 9pt; color: var(--color-primary-on-surface); }   .toggle-switch { position: relative; width: 30px; height: 15px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--color-border-muted); border-radius: 15px; transition: var(--duration-normal); } .toggle-slider::before { content: ""; position: absolute; width: 11px; height: 11px; left: 2px; bottom: 2px; background: var(--color-bg-base); border-radius: 50%; transition: var(--duration-normal); } .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(15px); }   .btn-compose-send { display: flex; align-items: center; gap: 3px; width: 64px; height: 28px; border: none; border-radius: 4px; cursor: pointer; font-size: 10pt; color: var(--color-bg-base); justify-content: center; }   .m-subject-title, .m-details-open, .m-sender-row, .m-more, .m-rl-pill { display: none; } .btn-compose-send img { width: 16px; height: 16px; } .btn-compose-send-inhouse { background: var(--color-primary); } .btn-compose-send-inhouse:hover { background: var(--color-primary-light); } .btn-compose-send-email { background: var(--color-text-secondary); } .btn-compose-send-email:hover { background: var(--color-text-tertiary); } .btn-compose-send:disabled { opacity: 0.5; cursor: not-allowed; }   .compose-mini-spinner { display: flex; align-items: center; } .loading-spinner.small { width: 20px; height: 20px; border-width: 2px; }   .compose-row2 { padding: 4px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }   .smail-comment-balloon { position: absolute; left: 5px; top: -22px; } .smail-comment-triangle { width: 0; height: 0; margin-left: 60px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-primary); }   .compose-details-section { max-height: 300px; overflow-y: auto; margin: 0 8px; padding: 8px 0; position: relative; } .detail-field-row { display: flex; align-items: flex-start; padding: 5px 10px; gap: 8px; } .detail-field-label { width: 40px; flex-shrink: 0; font-size: 9pt; color: var(--color-text-tertiary); padding-top: 4px; } .detail-field-input { flex: 1; border: none; border-bottom: 1px solid var(--color-text-tertiary); background: transparent; font-size: 10pt; padding: 4px 0; outline: none; } .detail-field-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 28px; } .detail-recipient-input { border: none; border-bottom: 1px solid var(--color-text-tertiary); background: transparent; font-size: 9pt; padding: 4px 0; outline: none; min-width: 180px; } .detail-field-label-sm { font-size: 8pt; color: var(--color-text-tertiary); flex-shrink: 0; }   .detail-dm-overlay { position: absolute; inset: 0; background: rgba(159, 159, 159, 0.5); border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 10; } .detail-dm-overlay span { font-size: 12pt; font-weight: bold; color: var(--color-bg-base); }   .compose-response-limit-settings { padding: 10px; position: relative; } .response-limit-fields { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 5px 0; } .response-limit-datetime { border: none; border-bottom: 1px solid var(--color-text-tertiary); background: transparent; font-size: 9pt; padding: 2px; outline: none; } .response-limit-hours { width: 60px; border: none; border-bottom: 1px solid var(--color-text-tertiary); background: transparent; font-size: 9pt; padding: 2px; outline: none; text-align: center; } .response-limit-unit { font-size: 9pt; color: var(--color-text-secondary); } .response-users-row { display: flex; align-items: flex-start; gap: 4px; padding: 5px 0; }   .compose-sending-overlay { position: absolute; inset: 0; z-index: var(--z-sticky); background: rgba(240, 240, 240, 0.2); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }   .compose-no-draft-overlay { position: absolute; inset: 0; z-index: var(--z-sticky); background: rgba(128, 128, 128, 0.8); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .compose-no-draft-overlay span { font-size: 12pt; font-weight: bold; color: var(--color-bg-base); text-align: center; line-height: 1.8; }   .compose-status-bar { padding: 4px 12px; font-size: 8pt; color: var(--color-primary-on-surface); text-align: center; } .compose-status-bar.error { color: var(--color-error); }   .compose-recipient-error { padding: 2px 12px 6px; font-size: var(--font-xs); color: var(--color-error); }   .compose-footer-actions { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--color-border-muted); }   .candidate-title-badge { font-size: 7pt; background: var(--color-primary-muted); color: var(--color-primary-on-surface); padding: 0 4px; border-radius: 3px; margin-left: 4px; font-weight: var(--weight-semibold); } .candidate-project { font-size: 7pt; color: var(--color-text-tertiary); margin-left: 4px; } .candidate-icon { width: 14px; height: 14px; margin-left: 4px; vertical-align: middle; }   .btn-template-add { display: inline-flex; align-items: center; gap: 4px; height: 22px; background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: 4px; cursor: pointer; font-size: 11pt; flex-shrink: 0; line-height: 1; text-align: center; padding: 0 8px; } .btn-template-add-label { font-size: 8pt; } .btn-template-add:hover { background: var(--color-primary-muted); color: var(--color-text-primary); } .template-add-form { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; } .template-add-input { border: none; border-bottom: 1px solid var(--color-text-tertiary); background: transparent; font-size: 9pt; padding: 3px 4px; outline: none; } .template-add-input:focus { border-bottom-color: var(--color-primary); } .template-add-actions { display: flex; gap: 6px; justify-content: flex-end; } .btn-template-save { padding: 2px 10px; background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: 3px; font-size: 8pt; cursor: pointer; } .btn-template-save:hover { background: var(--color-primary-muted); color: var(--color-text-primary); } .btn-template-cancel { padding: 2px 10px; background: var(--color-border-default); border: none; border-radius: 3px; font-size: 8pt; cursor: pointer; color: var(--color-text-secondary); } .btn-template-cancel:hover { background: var(--color-border-muted); }   .template-add-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .template-add-title { font-size: 9pt; font-weight: 600; color: var(--color-text-primary); } .template-add-head .btn-template-cancel { background: transparent; padding: 0 4px; font-size: 9pt; line-height: 1; } .template-add-head .btn-template-cancel:hover { background: var(--color-border-muted); } .template-add-label { font-size: 8pt; color: var(--color-text-secondary); margin-top: 2px; } .template-add-body { border: 1px solid var(--color-border-default); border-radius: 3px; resize: vertical; font-family: inherit; } .template-add-personal { display: flex; align-items: center; gap: 4px; font-size: 8pt; color: var(--color-text-secondary); margin-top: 2px; }   .template-manage-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; background: transparent; border: none; cursor: pointer; font-size: 8pt; color: var(--color-text-secondary); text-align: left; } .template-manage-item:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }   .compose-popup-menu.bm-template-popup { right: auto; left: 0; min-width: 220px; max-width: 380px; max-height: 350px; overflow-y: auto; padding: 4px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); color: var(--color-text-primary); } .compose-popup-menu.bm-template-popup .template-popup-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 2px 0; padding: 6px 10px; border: none; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; } .compose-popup-menu.bm-template-popup .template-popup-item:hover { background: var(--color-primary-surface); } .compose-popup-menu.bm-template-popup .template-popup-title { font-weight: var(--weight-bold); color: var(--color-text-primary); } .compose-popup-menu.bm-template-popup .template-popup-body { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-secondary); } .compose-popup-menu.bm-template-popup .template-manage-item { color: var(--color-text-tertiary); }   .bm-template-top-item { min-height: 26px; max-width: 180px; margin: 0 0 3px 5px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .bm-template-top-item:hover { background: var(--color-primary-surface); border-color: var(--color-primary); } .bm-template-more { min-height: 26px; margin: 0 0 3px 5px; padding: 3px 10px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); cursor: pointer; white-space: nowrap; } .bm-template-more:hover { background: var(--color-primary-dark); } .bm-template-add { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; margin: 0 0 3px 5px; padding: 3px 8px; border: 1px dashed var(--color-border-default); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .bm-template-add:hover { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-text-primary); }   .sender-select-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .sender-select { flex: 1; min-width: 0; } .sender-primary-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 8px; background: var(--color-primary); color: var(--color-bg-base); font-size: 8pt; line-height: 1.4; }   .compose-sender-row { display: flex; align-items: center; margin: 0 0 6px; } .compose-sender-label { margin-right: 10px; flex-shrink: 0; color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: var(--weight-semibold); } .compose-sender-row .sender-select { height: 32px; }   .message-detail-panel.composing-split { display: flex; flex-direction: column; } .compose-split-top { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; } .compose-splitter { height: 3px; background: transparent; border-top: 1px solid var(--color-border-muted); cursor: row-resize; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .compose-splitter::after { display: none; } .compose-splitter:hover { background: var(--color-primary-surface); } .compose-split-bottom { flex-shrink: 0; overflow-y: auto; }   .compose-panel { position: relative; display: flex; flex-direction: column; }   .compose-load-failed { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--color-bg-base); color: var(--color-text-tertiary); font-size: var(--font-sm); } .compose-load-failed .compose-load-retry { background: none; border: none; padding: 0; color: var(--color-primary-on-surface); cursor: pointer; font-size: inherit; }   .chip-ctx-backdrop { position: fixed; inset: 0; z-index: 59; background: transparent; }   .bm-autosave-status { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-right: var(--space-2); white-space: nowrap; }   .recipient-tag .chip-warn { display: inline-flex; color: var(--color-warning); } .recipient-tag .chip-warn svg { width: 13px; height: 13px; }   .mention-backdrop { display: none; position: absolute; z-index: 0; margin: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; color: transparent; border-style: solid; border-color: transparent; pointer-events: none; } .mention-backdrop .mention-pill { color: transparent; background: var(--color-mention-to-bg); box-shadow: 0 0 0 1px var(--color-mention-to-border); border-radius: 10px; } .mention-backdrop .mention-pill.is-cc { background: var(--color-mention-cc-bg); box-shadow: 0 0 0 1px var(--color-mention-cc-border); } textarea.has-mention-pill { position: relative; z-index: 1; background-color: transparent !important; } 
/*css/screens/08-message-chat.css*/
  .detail-inhouse { display: flex; flex-direction: column; height: 100%; background: var(--color-bg-sunken); position: relative; }   .fcb-connector-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; display: none; } .fcb-connector-path { stroke: var(--color-error); stroke-width: 2; stroke-linecap: round; opacity: 0.5;   stroke-dasharray: 4 3; } .fcb-connector-dot { fill: var(--color-error); opacity: 0.85;   pointer-events: auto; cursor: pointer; }   .fcb-all-checked-compact { font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-on-surface); white-space: nowrap; }   .detail-project-bar { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border-default);   background: var(--color-bg-sunken); min-height: 44px; display: flex; align-items: center; } .project-label { font-size: var(--font-xs); color: var(--color-text-tertiary); font-weight: var(--weight-semibold); }   .inhouse-quote-list { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px; background: var(--color-bg-sunken); }   .quote-item { max-width: 75%; position: relative; cursor: pointer; padding: var(--space-1) 0; transition: opacity var(--duration-fast) var(--ease-default); } .quote-item.theirs { align-self: flex-start; } .quote-item.mine { align-self: flex-end; }   .inhouse-quote-list.masked .quote-item.non-selected { opacity: 0.5; } .inhouse-quote-list.masked .quote-item.non-selected:hover { opacity: 0.75; }   .quote-header { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; margin-bottom: 2px; padding: 0 var(--space-1); } .quote-header-left { display: flex; align-items: center; gap: var(--space-2); flex: 1;   min-width: min-content; }   .btn-quote-action { background: none; border: none; cursor: pointer; padding: var(--space-1); opacity: 0; display: flex; align-items: center; border-radius: var(--radius-sm); transition: opacity var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); } .btn-quote-action img { width: 15px; height: 15px; } .btn-quote-action:hover { opacity: 1; background: var(--color-border-default); } .btn-quote-action.hover-only { opacity: 0; visibility: hidden; } .quote-item:hover .btn-quote-action.hover-only { visibility: visible; opacity: 0.5; } .quote-item:hover .btn-quote-action.hover-only:hover { opacity: 1; }   .ti-send-failed { margin: 0 16px 8px; }   .quote-protected-indicator { color: var(--color-primary-on-surface); }   .quote-check-area { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; margin-right: var(--space-2); min-width: 0;   } .quote-check-area .checked-by-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quote-checked-text { font-size: var(--font-xs); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); padding: 2px 8px; background: var(--color-primary-surface); border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .quote-checked-text:hover { background: var(--color-primary-muted); }   .quote-body-border { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); position: relative; transition: box-shadow var(--duration-fast) var(--ease-default); }   .quote-body-border.theirs { border: none; border-radius: 12px 4px 4px 12px; } .quote-body-border.mine { border: none; border-radius: 4px 12px 12px 4px; }   .quote-body-border.surface-inhouse-theirs { background: var(--color-bubble-inhouse-theirs); } .quote-body-border.surface-inhouse-mine { background: var(--color-bubble-inhouse-mine); } .quote-body-border.surface-email-theirs { background: var(--color-bubble-email-theirs); } .quote-body-border.surface-email-mine { background: var(--color-bubble-email-mine); } .quote-body-border.surface-slack { background: var(--color-bubble-slack); } .quote-body-border.surface-bulletin { background: var(--color-bubble-bulletin); }   .quote-body-border.surface-sys { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 8px; }   html.dark .quote-body-border.surface-inhouse-theirs { background: #1E2A22; } html.dark .quote-body-border.surface-inhouse-mine { background: color-mix(in srgb, #1E2A22 72%, var(--color-primary) 28%); } html.dark .quote-body-border.surface-email-theirs { background: var(--color-bg-sunken); } html.dark .quote-body-border.surface-email-mine { background: var(--color-bg-elevated); } html.dark .quote-body-border.surface-slack { background: color-mix(in srgb, var(--color-bg-elevated) 80%, #7B1FA2 20%); } html.dark .quote-body-border.surface-bulletin { background: color-mix(in srgb, var(--color-bg-elevated) 80%, #3949AB 20%); }   .quote-body-border {   position: relative; overflow: visible; } .quote-body-border.expanded { overflow: visible; } .quote-item:hover .quote-body-border { box-shadow: 0 2px 8px var(--shadow-sm); }   .quote-avatar { position: relative;   width: 25px; height: 25px; border-radius: 4px; background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--duration-fast) var(--ease-default); } .quote-avatar:hover { background: var(--color-primary-surface); }   .quote-type-icon { position: absolute; top: -8px; right: -2px; width: 16px; height: 16px; display: inline-flex; color: var(--color-text-secondary); pointer-events: none; } .quote-type-icon svg { width: 16px; height: 16px; } .quote-type-icon.filled svg { fill: currentColor; } .quote-type-icon.slack { color: var(--color-slack-brand); }   .reply-ctx-chip { display: inline-flex; max-width: 420px; margin: 0 0 6px; border-radius: 6px;   background: var(--color-reply-context-chip-surface); cursor: pointer; overflow: hidden; } .reply-ctx-chip .reply-ctx-bar { width: 2px; flex: 0 0 2px; background: var(--color-primary); } .reply-ctx-chip .reply-ctx-body { display: flex; flex-direction: column; padding: 4px 8px 5px; min-width: 0; } .reply-ctx-chip .reply-ctx-name { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .reply-ctx-chip .reply-ctx-text { font-size: var(--font-2xs); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .rl-card-head { display: inline-flex; align-items: center; gap: 2px; min-width: 0; } .rl-card-head .rl-card-label { margin-left: 4px; } .rl-target-avatar { width: 18px; height: 18px; border-radius: 4px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-surface); font-size: var(--font-2xs); flex: 0 0 18px; } .rl-target-avatar img { width: 100%; height: 100%; object-fit: cover; } .rl-target-overflow { font-size: var(--font-2xs); margin-left: 2px; }   .rl-meter { display: block; position: relative; height: 4px; margin-top: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; } .rl-meter .rl-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: currentColor; } .quote-avatar img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }   .quote-sender {   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   min-width: calc(3em + 12px); font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-secondary); cursor: pointer; padding: 1px 6px; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-default); } .quote-sender:hover {   background: var(--color-primary-surface); text-decoration: underline; } .quote-mention { font-size: var(--font-xs); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .quote-mention.cc { color: #6b5b00; }   .mention-chip { display: inline-block; position: relative; background: var(--color-primary-surface); color: var(--color-primary-on-surface); padding: 1px 6px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast); margin: 0 1px; } .mention-chip:hover { background: var(--color-primary-light); color: white; } .quote-mention.cc .mention-chip { background: var(--color-warning-surface); color: #6b5b00; } .quote-mention.cc .mention-chip:hover { background: #e0c866; color: #3e3500; }   .mention-chip.email-mention { background: var(--color-bg-sunken); color: var(--color-text-secondary); font-weight: var(--weight-medium); padding: 2px 8px; font-size: var(--font-sm); } .mention-chip.email-mention:hover { background: var(--color-primary); color: white; }   .mention-chip[data-tooltip]:hover::before { content: none; border-top-color: var(--color-text-primary); z-index: var(--z-skip); pointer-events: none; }     .quote-time-short { display: none; } .quote-time {   font-size: var(--font-xs); color: var(--color-text-tertiary); margin-left: auto; font-variant-numeric: tabular-nums;   white-space: nowrap; flex-shrink: 0; }   .quote-subject { font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-1); letter-spacing: -0.01em; }   .quote-body {   font-size: var(--font-sm); color: var(--color-text-primary); white-space: pre-wrap; word-break: break-word; font-family: inherit; line-height: 18px; margin: 0; } .quote-body a { color: var(--color-primary-on-surface); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-default); } .quote-body a:hover { border-bottom-color: var(--color-primary); }   .detail-attachments-inline {   display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }   .inhouse-action-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-default); position: relative; background: var(--color-bg-base); flex-shrink: 0; } .inhouse-action-bar .check-label, .inhouse-action-bar .check-indicator.checked .check-label { color: var(--color-text-secondary); } .inhouse-action-bar .check-indicator.checked .check-img { filter: none; }   .detail-email { overflow-y: auto; } .sender-indicator { display: flex; align-items: center; gap: 5px; margin-right: 10px; } .sender-label { font-size: 7pt; color: var(--color-text-tertiary); } @keyframes toast-fade { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; } }   .message-view-page { height: 100vh; display: flex; flex-direction: column; background: var(--color-bg-sunken); } .message-view-loading{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-text-tertiary); font-size: 10pt; gap: 16px; } .message-view-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .btn-back { display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--color-border-default); color: var(--color-text-secondary); border-radius: 15px; text-decoration: none; font-size: 9pt; font-weight: var(--weight-semibold); transition: background var(--duration-fast); } .btn-back:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .message-view-title { font-size: 10pt; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .message-view-content { flex: 1; overflow-y: auto; background: var(--color-bg-base); }   .project-display { display: flex; align-items: center; gap: var(--space-2); } .project-avatar-mini { width: 28px; height: 28px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; } .project-avatar-mini img { width: 100%; height: 100%; object-fit: cover; } .project-title-text { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); letter-spacing: -0.01em; }   .theme-selector-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-skip); }   .quote-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: 60px var(--space-5); color: var(--color-text-disabled); font-size: var(--font-sm); font-weight: var(--weight-medium); } .loading-spinner { width: 28px; height: 28px; border: 3px solid var(--color-border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }   .message-detail > .thread-switching { flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); }   .message-detail.switching > *:not(.thread-switching) { display: none; } .quote-empty { display: flex; align-items: center; justify-content: center; padding: 60px; } .quote-empty-logo { width: 56px; height: 56px; opacity: 0.2; }   .quote-load-more-top, .quote-load-more-bottom { display: flex; justify-content: center; padding: var(--space-2); }   .quote-refreshing-banner { padding: 8px 14px; background: #FFF8F0; color: #e65100; font-size: var(--font-sm); border-radius: var(--radius-full); text-align: center; margin: var(--space-2) auto; max-width: 80%; border: 1px solid #FFE0C0; }     .att-card { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .att-card:hover { background: var(--color-bg-sunken); }     .att-ficon.has-thumb { overflow: hidden; border-radius: 4px; border: 1px solid var(--color-border-default); background: var(--color-bg-base); } .att-ficon.has-thumb .att-badge { display: none; } .att-ficon .att-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }   .att-ficon.has-appicon { background: transparent; } .att-ficon.has-appicon .att-badge { display: none; } .att-ficon .att-appicon { display: block; width: 28px; height: 28px; object-fit: contain; margin: 1px; } .att-ficon { position: relative; width: 30px; height: 30px; flex: none; --att-color: var(--color-text-tertiary); color: var(--att-color); } .att-ficon svg { width: 30px; height: 30px; display: block; } .att-ficon.type-pdf { --att-color: var(--color-error); } .att-ficon.type-xls { --att-color: var(--color-success); } .att-ficon.type-doc { --att-color: var(--color-info); } .att-ficon.type-img { --att-color: #a065d9; } .att-ficon.type-file { --att-color: var(--color-text-tertiary); } .att-badge { position: absolute; left: -1px; bottom: 2px; padding: 0 3px; border-radius: 3px; background: var(--att-color); color: #fff; font-size: 8px; font-weight: 800; line-height: 12px; letter-spacing: .02em; }   .att-info { flex: 1; min-width: 0; padding-right: 6px; } .att-title-line { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .att-sub { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .att-saved-chip { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--color-primary); border-radius: 8px; background: var(--color-primary-surface); color: var(--color-primary-on-surface);   cursor: pointer; font-family: inherit; line-height: inherit; font-size: var(--font-2xs); font-weight: var(--weight-semibold); white-space: nowrap; }   .att-actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px; background: var(--color-bg-base); border: 1px solid var(--color-border-muted); border-radius: 6px; box-shadow: 0 2px 8px var(--shadow-sm); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-default); } .att-card:hover .att-actions, .att-card.menu-open .att-actions { opacity: 1; visibility: visible; }   .att-card.menu-open { z-index: 20; } .att-abtn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--color-primary-on-surface); } .att-abtn.more { color: var(--color-text-tertiary); } .att-abtn:hover { background: var(--color-primary-surface); } .att-abtn svg { width: 15px; height: 15px; }   .att-actions .att-menu-anchored { top: calc(100% + 4px); right: 0; left: auto; }   .quote-resolved-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-primary); color: white; padding: 8px 20px; border-radius: var(--radius-full); font-size: var(--font-md); font-weight: var(--weight-bold); opacity: 0.85; pointer-events: none; letter-spacing: 0.05em; }   .quote-alert-bubble { text-align: center; padding: 8px 16px; border-radius: var(--radius-full); margin: var(--space-2) auto; max-width: 70%; font-size: var(--font-xs); font-weight: var(--weight-semibold); } .quote-alert-text { display: inline; }   .dm-first-card { display: flex; flex-direction: column; align-items: center; background: var(--color-bg-base); border-radius: var(--radius-xl); padding: 40px 30px; margin: 40px auto; max-width: 360px; text-align: center; gap: var(--space-4); box-shadow: 0 2px 12px var(--shadow-sm); } .dm-first-avatar { width: 64px; height: 64px; border-radius: var(--radius-xl); background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; } .dm-first-avatar img { width: 36px; height: 36px; opacity: 0.6; } .dm-first-info { display: flex; flex-direction: column; gap: 2px; } .dm-first-name { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .dm-first-addr { font-size: var(--font-sm); color: var(--color-text-disabled); } .dm-first-message { font-size: var(--font-base); color: var(--color-text-secondary); line-height: 1.7; } .dm-first-message p { margin: 2px 0; } .dm-first-message strong { color: var(--color-text-primary); }     .thread-draft-banner { display: flex; align-items: center; gap: var(--space-2);   white-space: nowrap; min-width: 0; padding: var(--space-2) var(--space-4); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); border-top: 1px solid var(--color-border-default); font-size: var(--font-sm); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); background: var(--color-bg-elevated); } .thread-draft-banner:hover { background: var(--color-primary-surface); } .thread-draft-banner.draft-failed { color: var(--color-error); font-weight: var(--weight-bold); background: #FFF5F5; } .draft-failed-x { font-size: var(--font-lg); font-weight: var(--weight-bold); } .draft-banner-icon { width: 14px; height: 14px; opacity: 0.7; } .btn-draft-delete { margin-left: auto; background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-default); } .btn-draft-delete:hover { background: #FFE0E0; } .btn-draft-delete img { width: 14px; height: 14px; }   .sending-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; z-index: 50; }   .account-popup-overlay { position: fixed; inset: 0; z-index: var(--z-dropdown); background: rgba(0, 0, 0, 0.1); } .account-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: 0 8px 32px var(--shadow-lg); padding: var(--space-5); z-index: 201; display: flex; align-items: center; gap: var(--space-3); min-width: 260px; animation: panel-open var(--duration-fast) var(--ease-default) forwards; } .account-popup-avatar { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .popup-avatar-initial { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .account-popup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .account-popup-info strong { font-size: var(--font-md); color: var(--color-text-primary); } .popup-addr { font-size: var(--font-xs); color: var(--color-text-disabled); word-break: break-all; }   .account-popup-candidates-head { white-space: pre-line; text-align: center; margin-bottom: 12px; font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); } .account-popup-candidates { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; width: 100%; } .account-popup-candidate { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 10px; border: none; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; } .account-popup-candidate:hover { background: var(--color-primary-surface); } .candidate-name { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .candidate-theme { font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-popup-close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 16px; color: var(--color-text-disabled); cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); } .btn-popup-close:hover { color: var(--color-text-primary); background: var(--color-border-default); }   .account-popup.account-popup-enhanced { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: panel-open var(--duration-fast) var(--ease-default) forwards; flex-direction: column; align-items: stretch; padding: 0; min-width: 260px; max-width: 320px; overflow: hidden; z-index: var(--z-overlay); } .popup-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--color-border-default); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .popup-header-staff { background: var(--color-primary-surface); } .popup-category { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .popup-header-staff .popup-category { color: var(--color-primary-on-surface); } .account-popup-enhanced .btn-popup-close { position: static; margin-left: auto; } .popup-body { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .popup-left { flex-shrink: 0; } .popup-right { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .popup-name { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); word-break: break-all; } .popup-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: var(--weight-medium); width: fit-content; } .popup-badge-admin { background: var(--color-success-surface); color: var(--color-primary-on-surface); } .popup-badge-retired { background: var(--color-warning-surface); color: #e65100; } .popup-voice { font-size: var(--font-xs); color: var(--color-text-tertiary); font-style: italic; padding: 2px 0; }   .account-popup-enhanced .popup-header { align-items: flex-start; gap: var(--space-3); } .account-popup-enhanced .popup-header .account-popup-avatar { width: 48px; height: 48px; } .popup-headtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .popup-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .popup-badge-kind { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }   .popup-person-attribute { font-size: var(--font-xs); color: var(--color-text-tertiary); overflow-wrap: anywhere; } .popup-badge-row { display: flex; flex-wrap: wrap; gap: 4px; } .popup-badge-system { background: var(--color-primary-surface); color: var(--color-text-tertiary); } .popup-candidates { font-size: var(--font-xs); color: var(--color-text-primary); } .popup-candidates-muted { color: var(--color-text-tertiary); } .popup-tel-list { margin: 2px 0 0; padding: 0; list-style: none; max-height: 120px; overflow-y: auto; } .popup-tel-item { display: flex; flex-direction: column; margin-bottom: 2px; font-size: var(--font-xs); } .popup-tel-label { color: var(--color-text-tertiary); } .popup-tel-row { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-primary); } .account-popup-enhanced .popup-body { flex-direction: column; gap: var(--space-2); } .popup-addr-row { display: flex; align-items: center; gap: 4px; min-width: 0; } .btn-popup-copy { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .btn-popup-copy:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .account-popup-enhanced .account-popup-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; margin-left: 0; padding: 4px 6px 6px; border-top: 1px solid var(--color-border-default); }   .account-popup-enhanced .btn-popup-action { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; background: transparent; color: var(--color-text-primary); font-weight: var(--weight-normal); font-size: var(--font-sm); border-radius: var(--radius-md); padding: 6px 10px; } .account-popup-enhanced .btn-popup-action:hover { background: var(--color-primary-surface); }   .quote-avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; } .popup-avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; } .detail-avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; } .dm-avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; } .thread-avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; }   .project-member-count { font-size: 8pt; color: var(--color-text-tertiary); margin-left: 4px; } .project-avatar-initial { font-size: 9pt; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); }   .auto-link { color: var(--color-primary-on-surface); text-decoration: underline; } .auto-link:hover { color: var(--color-primary-light); }   .account-popup-actions { display: flex; gap: 6px; margin-left: auto; } .btn-popup-action { display: flex; align-items: center; gap: 6px; background: var(--color-primary); border: none; border-radius: var(--radius-full); padding: 5px 14px; font-size: var(--font-xs); cursor: pointer; color: white; font-weight: var(--weight-semibold); transition: background var(--duration-fast) var(--ease-default); } .btn-popup-action:hover { background: var(--color-primary-dark); } .btn-popup-action img { filter: brightness(0) invert(1); }   .body-context-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); } .body-context-menu { position: fixed; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 8px 24px var(--shadow-lg); z-index: 301; min-width: 140px; padding: var(--space-1); animation: panel-open var(--duration-fast) var(--ease-default) forwards; } .body-context-menu button { display: block; width: 100%; padding: 8px 14px; background: none; border: none; font-size: var(--font-sm); text-align: left; cursor: pointer; color: var(--color-text-secondary); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-default); } .body-context-menu button:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }     .rl-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; border: 1px solid var(--color-border-muted); background: var(--color-bg-sunken); color: var(--color-text-tertiary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); white-space: nowrap; margin-left: 6px; } .rl-pill-success { background: var(--color-success-surface); border-color: var(--color-success); color: var(--color-success); }   .rl-card { display: flex; align-items: center; margin: 3px 0; padding: 7px 8px 7px 9px; border-radius: 8px; border-left: 3px solid var(--color-border-muted); background: var(--color-bg-elevated); font-size: var(--font-xs); width: fit-content; max-width: min(640px, 100%); flex-wrap: wrap;   row-gap: 6px; } .rl-card-iconbox { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; margin-right: 11px; flex-shrink: 0; background: var(--color-bg-sunken); color: var(--color-text-tertiary); } .rl-card-text { display: flex; flex-direction: column; gap: 2px; min-width: min-content; flex: 1 1 auto; }   .rl-card-label { font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .rl-card-meta { color: var(--color-text-tertiary); } .rl-card-actions { display: flex; flex-direction: column; gap: 6px; margin-left: 11px; flex-shrink: 0; }   .rl-meta-seg { white-space: nowrap; }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .rl-card { flex-wrap: wrap; } .rl-card-actions { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin-left: 0; margin-top: 6px; } } .rl-tone-ok { border-left-color: var(--color-success-dark); } .rl-tone-ok .rl-card-iconbox { background: var(--color-success-surface); color: var(--color-success-dark); } .rl-tone-ok .rl-card-label, .rl-tone-ok .rl-card-meta { color: var(--color-success-dark); }   .rl-card.rl-tone-ok { display: none; } .rl-tone-error { border-left-color: var(--color-error-dark); } .rl-tone-error .rl-card-iconbox { background: var(--color-error-surface); color: var(--color-error-on-surface); } .rl-tone-error .rl-card-label, .rl-tone-error .rl-card-meta { color: var(--color-error-on-surface); }   .rl-tone-warn { border-left-color: var(--color-warning-dark); } .rl-tone-warn .rl-card-iconbox { background: var(--color-warning-surface); color: var(--color-warning-dark); } .rl-tone-warn .rl-card-label, .rl-tone-warn .rl-card-meta { color: var(--color-warning-on-surface); }   .rl-card-reply { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; } .rl-card-reply.rl-tone-error { background: var(--color-error-dark); border-left: 0; } .rl-card-reply.rl-tone-warn { background: var(--color-warning-dark); border-left: 0; } .rl-card-reply:hover { filter: brightness(1.08); }   .rl-card-delete { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; } .rl-card-delete:hover { background: var(--color-bg-base); }   .qc-sub { margin-top: 5px; font-size: var(--font-xs); color: var(--color-text-secondary); } .qc-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 18px; padding: 3px; border-radius: 8px; background: var(--color-bg-sunken); } .qc-seg { padding: 6px 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .qc-seg.on { background: var(--color-bg-base); color: var(--color-text-primary); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); } .qc-status { margin-top: 12px; font-size: var(--font-xs); color: var(--color-text-secondary); } .qc-status.error { color: var(--color-error); } .qc-edit-more { margin-right: auto; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-primary-on-surface); font-size: var(--font-sm); text-decoration: underline; }   .qs-filter-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin-right: 2px; }   .thread-context-strip { margin: 2px 30px 4px 10px; padding: 2px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .tcs-row { display: flex; align-items: center; min-width: 0; } .tcs-seg {   white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; height: 28px; margin: 0 2px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .tcs-seg:hover, .tcs-seg.open { background: var(--color-bg-sunken); } .tcs-icon { display: inline-flex; margin-right: 5px; } .tcs-icon-task { color: var(--color-feature-task); } .tcs-icon-pin { color: var(--color-feature-pin); } .tcs-icon-file { color: var(--color-feature-file); }   .tcs-overdue { margin-left: 6px; font-weight: var(--weight-semibold); color: var(--color-error-on-surface); }   .tcs-chevron { margin-left: 6px; color: var(--color-text-tertiary); }   .theme-files-entry { white-space: nowrap; flex-shrink: 0;   display: inline-flex; align-items: center; margin: 0 4px 0 auto; padding: 3px 6px; border: 0; background: transparent; cursor: pointer; color: var(--color-primary-on-surface); font-size: var(--font-xs); }   .tcs-attachment-notice { display: flex; align-items: center; margin: 2px 2px 1px; padding: 4px 8px; border-radius: 6px; background: var(--color-feature-file-surface); font-size: var(--font-xs); color: var(--color-text-primary); } .tcs-attachment-notice .tcs-icon { margin-right: 8px; } .tcs-notice-text { min-width: 0; overflow-wrap: anywhere; }     .thread-task-bar, .thread-pin-bar, .thread-origin-bar { display: flex; margin: 0 30px 4px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); overflow: hidden; } .thread-origin-bar { align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.5; } .thread-origin-bar .icon-wrap, .thread-origin-bar svg { color: var(--color-slack-brand); flex-shrink: 0; } .thread-task-accent { width: 3px; flex-shrink: 0; background: var(--color-feature-task); } .thread-task-body { flex: 1; min-width: 0; margin: 3px 0; } .thread-task-rows { margin: 0; padding: 0; list-style: none; } .thread-task-row { display: flex; align-items: center; padding: 3px 13px 3px 12px; border-radius: 6px; cursor: pointer; } .thread-task-row:hover { background: var(--color-feature-task-surface); } .ttr-icon { display: inline-flex; margin-right: 8px; color: var(--color-feature-task); } .ttr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .ttr-assignee { display: inline-flex; align-items: center; margin-left: 10px; font-size: var(--font-xs); white-space: nowrap; flex-shrink: 0; }   .ttr-assignee-label { margin-right: 4px; color: var(--color-text-tertiary); } .ttr-assignee-avatar { width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; object-fit: cover; } .ttr-assignee-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .ttr-chip { white-space: nowrap; flex-shrink: 0;   display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 1px 8px; border-radius: 10px; background: var(--color-feature-task-surface); color: var(--color-feature-task-dark); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .ttr-due { margin-left: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }   .ttr-chevron { display: inline-flex; margin-left: 10px; color: var(--color-text-tertiary); }   .thread-task-row.overdue .ttr-chip { background: var(--color-error-surface); color: var(--color-error-on-surface); } .thread-task-row.overdue .ttr-due { color: var(--color-error-on-surface); font-weight: var(--weight-semibold); }     .thread-task-others, .thread-pin-more { margin: 0 0 2px 27px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); } .thread-task-others { color: var(--color-feature-task-dark); } .thread-task-others:hover { background: var(--color-feature-task-surface); } .thread-pin-more { color: var(--color-feature-pin-dark); } .thread-pin-more:hover { background: var(--color-bg-sunken); }   .thread-pin-accent { width: 3px; flex-shrink: 0; background: var(--color-feature-pin); } .thread-pin-rows { flex: 1; min-width: 0; margin: 3px 0; }   .quote-item.attachment-shelf { max-width: none; align-self: stretch; } .quote-item.attachment-shelf .quote-header { background: var(--color-feature-file-surface); } .quote-item.attachment-shelf .quote-body-border, .quote-item.attachment-shelf .quote-body-border.mine, .quote-item.attachment-shelf .quote-body-border.theirs { background: var(--color-bg-base); border: 0; border-left: 3px solid var(--color-feature-file); border-radius: 0; }   .quote-shelf-count { margin-left: 10px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-feature-file); }   .quote-shelf-focus { display: flex; flex-direction: row-reverse; align-items: center; margin: 2px 0 4px; min-width: 0; } .quote-shelf-read { flex-shrink: 0; margin-left: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-dark); } .quote-shelf-read:hover { text-decoration: underline; } .quote-shelf-head { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); line-height: 20px; color: var(--color-text-secondary); }   .pin-settings-overlay { position: fixed; inset: 0; z-index: var(--z-modal); } .pin-settings-popup { position: fixed; z-index: calc(var(--z-modal) + 1); width: 320px; max-width: calc(100vw - 32px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); box-shadow: var(--shadow-lg); } .pin-settings-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .pin-settings-body { padding: 12px 16px 16px; } .pin-settings-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; margin-bottom: 10px; } .pin-settings-row.datetime { grid-template-columns: 64px 1fr 72px; margin-bottom: 8px; } .pin-settings-label { font-size: var(--font-xs); color: var(--color-text-secondary); } .pin-settings-summary { margin: 0 0 12px; font-size: var(--font-xs); color: var(--color-text-secondary); } .pin-settings-actions { display: flex; justify-content: flex-end; gap: 8px; } .pin-settings-cancel { padding: 7px 16px; border: 1px solid var(--color-border-default); border-radius: 6px; background: transparent; color: var(--color-text-primary); cursor: pointer; } .pin-settings-cancel:hover { background: var(--color-primary-surface); } .pin-settings-save { padding: 7px 16px; border: 0; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); cursor: pointer; } .pin-settings-save:hover { opacity: 0.85; }   .rl-responders { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 0; } .rl-responder { font-size: var(--font-2xs); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); } .rl-responder.done { color: var(--color-success); border-color: var(--color-success); } .rl-responder.pending { color: var(--color-warning); border-color: var(--color-warning); } .quote-response-limit.light { background: #F0FAF5; color: var(--color-primary-on-surface); border: 1px solid #D0F0E0; } .quote-response-limit.normal { background: #FFF8F0; color: #e65100; border: 1px solid #FFE0C0; } .quote-response-limit.heavy { background: #FFF5F5; color: var(--color-error); border: 1px solid #FFD0D0; } .quote-response-limit.critical { background: #FF6B6B; color: white; } .quote-response-limit.expired {   background: var(--color-error); color: white; } .rl-expired-text { font-weight: var(--weight-bold); } .rl-remaining-text { font-weight: var(--weight-semibold); }   .quote-alert-icon { margin-right: 4px; }   .reply-dropdown-overlay { position: fixed; inset: 0; z-index: 99; }   .spinning-logo { animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }     .mobile-top-bar { display: none; align-items: center; gap: 10px; padding: 6px 12px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .btn-hamburger { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; } .btn-hamburger span { display: block; width: 20px; height: 2px; background: var(--color-text-secondary); border-radius: 1px; }   .mobile-sidebar-overlay { display: none; }   .mobile-folder-overlay { display: none; }   .btn-mobile-back { display: none; }   .btn-folder-toggle { display: none; }   @media (max-width: 1024px) { .folder-panel { width: 168px; } .message-list-panel { flex: 0.4; min-width: 220px; } .folder-item { padding: 6px 8px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .app-topbar .btn-hamburger { display: flex; }   .app-topbar .global-search-wrap { display: none; }   .sidebar { position: fixed; left: -250px; top: var(--topbar-height); bottom: 0; width: 240px; z-index: 1001; transition: left var(--duration-normal) ease; box-shadow: none; } .sidebar.mobile-open { left: 0; box-shadow: 4px 0 12px var(--shadow-sm); } .mobile-sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: var(--z-skip); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal); } .mobile-sidebar-overlay.active { opacity: 1; pointer-events: auto; }   .main-content { width: 100%; }   .talk-layout { flex-direction: column; position: relative; }   .folder-panel, .folder-panel.collapsed { position: fixed; left: -250px; top: 0; bottom: 0; width: 220px; z-index: 901; transition: left var(--duration-normal) ease; box-shadow: none; } .folder-panel.mobile-open, .folder-panel.collapsed.mobile-open { left: 0; box-shadow: 4px 0 12px var(--shadow-sm); }   .folder-collapsed-btn { display: none; } .mobile-folder-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal); } .mobile-folder-overlay.active { opacity: 1; pointer-events: auto; }   .btn-folder-toggle { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--color-border-muted); border-radius: 8px; cursor: pointer; font-size: 14px; width: 32px; height: 32px; flex-shrink: 0; color: var(--color-text-secondary); } .btn-folder-toggle:hover { background: var(--color-primary-surface); }   .panel-splitter { display: none; }     .message-list-panel { width: 100%; border-right: none; flex: 1; }   .message-detail-panel { position: absolute; inset: 0; margin: 0; z-index: var(--z-sticky); background: var(--color-bg-base); display: none; }   .talk-layout.mobile-show-detail .message-detail-panel { display: flex; flex-direction: column; } .talk-layout.mobile-show-detail .message-list-panel { display: none; }   .btn-mobile-back { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--color-bg-base); border: none; border-bottom: 1px solid var(--color-border-default); cursor: pointer; font-size: 10pt; font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); flex-shrink: 0; width: 100%; text-align: left; } .btn-mobile-back:hover { background: var(--color-primary-surface); }   .no-selection { display: none; }   .message-view-page { font-size: 10pt; } .quote-item { max-width: 95%; } .detail-header-info { flex-direction: column; gap: 4px; } .detail-timestamp { align-self: flex-end; } .head-actions { flex-wrap: wrap; } .detail-head-menu { flex-wrap: wrap; gap: 6px; padding: 6px 12px; } .detail-subject-bar { padding: 8px 12px; } .detail-body { padding: 12px; } .message-view-header { padding: 6px 12px; } .inhouse-quote-list { padding: 8px 10px; } .inhouse-action-bar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }   .compose-panel { height: 100%; } .compose-textarea { min-height: 120px; } .compose-actions { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }   .login-form, .message-view-login { margin: 20px 12px; padding: 24px 16px; }   .dashboard { padding: 16px; } .folder-cards { flex-wrap: wrap; gap: 8px; } .folder-card { flex: 1; min-width: 70px; padding: 10px 8px; } .folder-card .count { font-size: 20pt; }   .message-item { min-height: 48px; height: auto; }   .msg-subject { min-height: 18px; line-height: 1.3; }   .thread-item { padding: 8px 12px; }   .filter-dialog { width: 95vw; max-height: 85vh; } .filter-dialog-body { padding: 15px 20px; }   .top-guidance { padding: 15px; } .alert-card { padding: 8px 10px; margin-bottom: 12px; } }   @media (max-width: 480px) {   .search-bar { padding: 4px 6px; gap: 3px; } .search-bar input { font-size: 9pt; padding: 4px 8px; } .search-bar button { padding: 4px 8px; font-size: 8pt; } .msg-list-header-top { padding: 3px 4px; gap: 2px; min-height: 36px; } .compose-row { padding: 5px 10px; } .compose-label { width: 28px; font-size: 8pt; } .btn-send { padding: 6px 14px; font-size: 9pt; } .btn-draft, .btn-discard { padding: 6px 10px; font-size: 8pt; } .detail-from { font-size: 10pt; } .btn-action-icon { padding: 6px; } .btn-action-icon img { width: 18px; height: 18px; } }   .quote-load-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; line-height: 1; } .quote-load-pill:disabled { cursor: default; opacity: 0.75; } .quote-load-pill.older { padding: 6px 16px; border-radius: 12px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: var(--font-xs); } .quote-load-pill.older:hover:not(:disabled) { background: var(--color-bg-base); }   .quote-load-pill.newer { height: 22px; padding: 0 10px; border-radius: 11px; background: color-mix(in srgb, var(--color-primary-surface) 78%, transparent);   border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); color: var(--color-primary-dark); font-size: var(--font-xs); font-weight: var(--weight-semibold); opacity: 0.6; transition: opacity 120ms linear; } .quote-load-pill.newer:hover:not(:disabled) { opacity: 1; background: var(--color-primary-surface); border-color: var(--color-primary); }   .quote-load-more-bottom { position: sticky; bottom: var(--space-2); z-index: 5; pointer-events: none;   padding-top: var(--space-1); } .quote-load-more-bottom .quote-load-pill { pointer-events: auto; }   .quote-load-pill-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }   .mile-gift-card { display: flex; align-items: center; align-self: center; max-width: 340px; margin: 6px 20px; padding: 9px 14px; background: var(--color-primary-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); } .mile-gift-card-icon { flex-shrink: 0; margin-right: 10px; font-size: var(--font-xl); line-height: 1; } .mile-gift-card-texts { min-width: 0; } .mile-gift-card-text { font-size: var(--font-xs); color: var(--color-text-primary); overflow-wrap: anywhere; } .mile-gift-card-amount { margin-top: 2px; font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .mile-gift-line { align-self: center; margin: 4px 20px 8px; padding: 8px 12px; background: var(--color-primary-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); font-size: var(--font-xs); color: var(--color-text-secondary); text-align: center; overflow-wrap: anywhere; } .mile-gift-line-amount { font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); }   .agent-typing-bubble { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-1) var(--space-5) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-primary-muted); color: var(--color-text-on-primary); font-size: var(--font-sm); box-shadow: var(--shadow-sm); width: fit-content; } .agent-typing-sparkle { animation: agent-typing-sparkle 0.9s ease-in-out infinite alternate; } .agent-typing-dots { display: inline-flex; gap: 2px; margin-left: var(--space-1); } .agent-typing-dots i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-text-on-primary); opacity: 0.3; animation: agent-typing-dot 1.2s ease-in-out infinite; } .agent-typing-dots i:nth-child(2) { animation-delay: 0.2s; } .agent-typing-dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes agent-typing-sparkle { from { opacity: 0.6; } to { opacity: 1; } } @keyframes agent-typing-dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .agent-typing-sparkle, .agent-typing-dots i { animation: none; opacity: 0.8; } } 
/*css/screens/09-settings-account.css*/
    :where([title]) { position: relative; }   .sp-tooltip { position: fixed; z-index: var(--z-skip); max-width: 300px; padding: 6px 10px;   background: var(--color-tooltip-bg); border-left: 3px solid var(--color-primary); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); color: var(--color-tooltip-fg); font-size: 12px; font-weight: var(--weight-medium, 500); line-height: 1.45; white-space: pre-line; pointer-events: none; animation: tooltip-in 0.15s var(--ease-default); } @keyframes tooltip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }   .sp-tooltip.msg-tooltip { max-width: 320px; padding: 8px 12px; } .sp-tooltip-title { font-size: 12px; font-weight: var(--weight-semibold); } .sp-tooltip-sub { margin-top: 3px; font-size: 11px; opacity: 0.8; } .sp-tooltip-sub ~ .sp-tooltip-sub { margin-top: 2px; opacity: 0.7; }   @keyframes flash-story { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes short-flash-story { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .flash { animation: flash-story 1s ease-in-out 3; }   * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.08) transparent; } *:hover { scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }       .settings-layout { display: flex; width: 720px; max-width: 100%; height: 100%; background: var(--color-bg-base); }   .settings-sidebar { display: flex; flex-direction: column; width: 220px; min-width: 220px; min-height: 0; background: var(--color-bg-elevated); border-right: 1px solid var(--color-border-default);   } .settings-sidebar-title {   font-size: var(--font-md); font-weight: 600; color: var(--color-text-on-primary); padding: 0; }   .settings-menu-item { position: relative; margin: 4px 8px; padding: 8px 12px 8px 23px; border-radius: 8px; cursor: pointer; font-size: var(--font-xs); font-weight: 500; color: var(--color-text-primary); transition: background var(--duration-fast); }   .settings-menu-item::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--color-primary); opacity: 0; } .settings-menu-item:hover { background: var(--color-bg-sunken); } .settings-menu-item:active { background: var(--color-border-default); } .settings-menu-item.active { background: var(--color-primary-surface); } .settings-menu-item.active::before { opacity: 1; }   .settings-menu-item-two-line { display: flex; flex-direction: column; gap: 2px; } .settings-menu-item-heading { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .settings-menu-item-summary { font-size: var(--font-2xs); font-weight: 400; color: var(--color-text-tertiary); white-space: normal; }   .settings-heading-title { font-size: var(--font-xl); font-weight: bold; color: var(--color-text-primary); margin: 0 0 6px; } .settings-heading-summary { margin: 0 0 20px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .settings-heading-part { margin: 0 0 16px; }   .settings-heading-part:focus, .settings-heading-part:focus-visible { outline: none; } .settings-heading-part .settings-tab-title { font-size: var(--font-lg); font-weight: 600; } .settings-content { flex: 1; overflow-y: auto;   padding: 24px 32px 36px; } .settings-loading { color: var(--color-text-tertiary); padding: 32px; text-align: center; }   .settings-tab { max-width: none; }   .settings-tab-title { font-size: var(--font-xl); font-weight: bold; color: var(--color-text-primary); margin: 0 0 6px; }   .settings-section { margin: 0 0 24px; padding: 20px 24px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 8px; }   .settings-mirror-card { position: relative; padding-left: 28px; } .settings-mirror-card::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--color-primary); opacity: 0.4; }   .settings-private-pill { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--color-ai-assist-border); color: var(--color-ai-assist-accent); font-size: var(--font-xs); font-weight: var(--weight-semibold); vertical-align: middle; }   .settings-mirror-inset { margin: 16px 0 0; padding: 12px 14px; border-radius: 6px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); }   .settings-mirror-card .settings-field-row > span:first-child, .settings-mirror-card .settings-btn-sm { white-space: nowrap; flex: none; } .settings-mirror-card .settings-field-row { flex-wrap: wrap; }   .settings-mirror-card label.settings-field-row { flex-wrap: nowrap; } .settings-mirror-card label.settings-field-row > input { flex: none; }   .settings-inline-toggle { display: flex; flex: none; align-items: center; gap: 8px; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .settings-slack-connection { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; padding: 16px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); } .settings-slack-connection-text { flex: 1 1 300px; min-width: 0; } .settings-slack-connection-headline { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .settings-slack-connection-text .settings-description { margin: 5px 0 0; }   .settings-slack-alert { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--color-warning-surface); border: 1px solid var(--color-warning-badge); color: var(--color-warning-on-surface); font-size: var(--font-xs); line-height: 1.7; } .settings-slack-timing-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.7; } .settings-description { font-size: 9pt; color: var(--color-text-tertiary); margin-bottom: 8px; } .settings-hint { font-size: 8pt; color: var(--color-text-disabled); margin-top: 4px; }       .settings-checkbox.settings-checkbox-top { align-items: flex-start; } .settings-checkbox { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; cursor: pointer; font-size: 10pt; } .settings-checkbox input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; } .settings-field-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 10pt; }   .settings-field-row > .settings-checkbox { flex: 0 0 auto; } .settings-field-label { color: var(--color-text-secondary);   white-space: nowrap; } .settings-input { padding: 4px 8px; border: 1px solid var(--color-border-muted); border-radius: 4px; font-size: 10pt; outline: none; width: 100%; } .settings-input:focus { border-color: var(--color-primary); } .settings-input-sm { padding: 4px 8px; border: 1px solid var(--color-border-muted); border-radius: 4px; font-size: 10pt; outline: none; width: 80px; text-align: center; }   input[type="date"].settings-input-sm { width: 140px;   max-width: 140px; text-align: left;   flex: 0 0 auto; } .settings-input-sm:focus { border-color: var(--color-primary); } .settings-textarea { width: 100%; padding: 8px; border: 1px solid var(--color-border-muted); border-radius: 4px; font-size: 10pt; font-family: inherit; outline: none; resize: vertical; } .settings-textarea:focus { border-color: var(--color-primary); } .settings-theme-display { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .settings-theme-name { font-size: 10pt; font-weight: bold; color: var(--color-primary-on-surface); padding: 4px 12px; background: var(--color-primary-surface); border-radius: 4px; } .settings-theme-search { display: flex; gap: 8px; margin: 8px 0; } .settings-theme-results { border: 1px solid var(--color-border-muted); border-radius: 4px; max-height: 200px; overflow-y: auto; margin-top: 4px; } .settings-theme-item { padding: 6px 12px; font-size: 10pt; cursor: pointer; border-bottom: 1px solid var(--color-border-default); } .settings-theme-item:last-child { border-bottom: none; } .settings-theme-item:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .settings-slack-info { display: flex; align-items: center; gap: 12px; font-size: 10pt; } .settings-btn { padding: 6px 16px; border: 1px solid var(--color-primary); border-radius: 4px; background: var(--color-bg-base); color: var(--color-primary-on-surface); font-size: 10pt; cursor: pointer; transition: background var(--duration-fast); } .settings-btn:hover { background: var(--color-primary-surface); } .settings-btn-sm { padding: 3px 10px; border: 1px solid var(--color-border-muted); border-radius: 4px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: 9pt; cursor: pointer; } .settings-btn-sm:hover { background: var(--color-border-default); } .settings-btn-danger { border-color: var(--color-error); color: var(--color-error);   } .settings-btn-danger:hover { background: var(--color-error-surface); } .settings-test-result { display: inline-block; margin-left: 10px; font-size: 9pt; font-weight: var(--weight-semibold); } .settings-test-result.success { color: var(--color-primary-on-surface); } .settings-test-result.error { color: #cc4444; } .settings-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin-right: 15px; font-size: 10pt; } .settings-btn-primary { background: var(--color-primary); color: var(--color-bg-base); border-color: var(--color-primary); font-weight: bold; } .settings-btn-primary:hover { background: var(--color-primary-dark); } .settings-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border-default); } .settings-save-message { font-size: 10pt; } .settings-save-message.success { color: var(--color-primary-on-surface); } .settings-save-message.error { color: #cc4444; }   .settings-list { border: 1px solid var(--color-border-default); border-radius: 4px; max-height: 300px; overflow-y: auto; } .settings-list-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 10pt; border-bottom: 1px solid var(--color-border-default); } .settings-list-item:last-child { border-bottom: none; } .settings-list-item:hover { background: var(--color-bg-sunken); } .settings-list-sub { color: var(--color-text-tertiary); font-size: 9pt; } .settings-list-code { color: var(--color-primary-on-surface); font-weight: bold; min-width: 30px; } .settings-badge-active { font-size: 8pt; color: var(--color-primary-on-surface); background: var(--color-primary-surface); padding: 1px 6px; border-radius: 3px; font-weight: bold; } .settings-badge-inactive { font-size: 8pt; color: var(--color-text-tertiary); background: var(--color-border-default); padding: 1px 6px; border-radius: 3px; } .settings-item-actions { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; opacity: 0; transition: opacity var(--duration-fast); } .settings-list-item:hover .settings-item-actions { opacity: 1; }   .settings-listlabel .settings-item-actions { opacity: 1; } .settings-btn-icon { width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; font-size: 10pt; color: var(--color-text-tertiary); border-radius: 3px; display: flex; align-items: center; justify-content: center; padding: 0; } .settings-btn-icon:hover { background: var(--color-border-default); color: var(--color-text-secondary); } .settings-btn-icon.settings-btn-danger:hover { background: var(--color-error-surface); color: var(--color-error); } .settings-color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--color-border-muted); flex-shrink: 0; }   .settings-color-swatch-radio { position: relative; display: inline-flex; align-items: center; cursor: pointer; padding: 2px; border-radius: 5px; border: 1px solid transparent; } .settings-color-swatch-radio:hover { border-color: var(--color-border-default); } .settings-color-swatch-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }   .settings-color-swatch-radio input[type="radio"]:checked + .settings-color-swatch { box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 3px var(--color-primary); } .settings-color-swatch-radio input[type="radio"]:focus-visible + .settings-color-swatch { outline: 2px solid var(--color-primary); outline-offset: 2px; }   .settings-watermark { font-size: 9.5pt; color: var(--color-text-tertiary); } .settings-color-input { width: 30px; height: 24px; padding: 0; border: 1px solid var(--color-border-muted); border-radius: 3px; cursor: pointer; }   .settings-check-list { display: flex; flex-direction: column; gap: 2px; max-width: 340px; } .settings-check-row { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; font-size: var(--font-sm); color: var(--color-text-primary); cursor: pointer; } .settings-select-sm { padding: 3px 8px; border: 1px solid var(--color-border-muted); border-radius: 4px; font-size: 9pt; outline: none; } .settings-select-sm:focus { border-color: var(--color-primary); }   .settings-plan-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; } .settings-plan-card { width: 160px; border-radius: 12px; overflow: hidden; background: var(--color-bg-sunken); border: 2px solid transparent; transition: border-color var(--duration-normal); } .settings-plan-card.active { border-color: var(--color-primary); box-shadow: 0 2px 8px var(--shadow-sm); } .settings-plan-name { font-size: 10pt; font-weight: bold; } .settings-plan-label { font-size: 9pt; margin-top: 4px; } .settings-plan-price { font-size: 8pt; margin-top: 4px; color: var(--color-text-secondary); } .settings-plan-body { padding: 8px 10px; } .settings-plan-feature { font-size: 8pt; color: var(--color-text-tertiary); line-height: 1.6; }   .settings-mobile-toggle { display: none; padding: 8px 12px; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); font-size: 10pt; font-weight: bold; color: var(--color-primary-on-surface); cursor: pointer; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .settings-sidebar { position: fixed; left: -200px; top: 0; height: 100vh; z-index: var(--z-sticky); transition: left var(--duration-normal); box-shadow: 2px 0 8px var(--shadow-sm); } .settings-sidebar.mobile-open { left: 0; } .settings-mobile-toggle { display: block; } .settings-plan-cards { flex-direction: column; } .settings-plan-card { width: 100%; } }     .sc-overlay { position: relative; display: flex; justify-content: center; align-items: center; min-height: 100%; padding: 20px; background: rgba(0,0,0,0.5); }   .sc-card { width: 420px; max-width: 100%; background: var(--color-bg-base); border: 3px solid rgba(211,211,211,0.4); border-radius: 10px; overflow: visible; position: relative; }   .sc-header { height: 50px; background: var(--color-primary); border-radius: 9px 9px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px; } .sc-header-title { font-size: 18px; font-weight: bold; color: var(--color-text-primary); } .sc-header-label-group { display: flex; flex-direction: column; gap: 0; } .sc-header-sublabel { font-size: 7pt; color: var(--color-text-tertiary); line-height: 1; } .sc-header-name { font-size: 12pt; font-weight: bold; color: var(--color-text-primary); line-height: 1.3; } .sc-header-buttons { display: flex; align-items: center; gap: 4px; } .sc-header-icon-btn { width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 3px; transition: background var(--duration-fast); } .sc-header-icon-btn:hover { background: var(--color-primary-dark); } .sc-header-icon-btn img { width: 15px; height: 15px; } .sc-header-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 18px; color: var(--color-text-primary); text-decoration: none; border-radius: 50%; transition: background var(--duration-fast); } .sc-header-close:hover { background: rgba(0,0,0,0.1); }   .sc-body { padding: 10px 18px 0; }   .sc-grid { display: grid; grid-template-columns: 100px 1fr; gap: 0; align-items: start; } .sc-grid-label { font-size: 10pt; color: var(--color-text-primary); padding: 4px 0; } .sc-grid-value { padding: 0 0 15px 0; } .sc-text { font-size: 10pt; } .sc-required { color: #e53935; }   .sc-input { width: 100%; border: none; border-bottom: 0; font-size: 10pt; padding: 2px 0; outline: none; background: transparent; color: var(--color-text-primary); } .sc-input-editable { border: 1px solid var(--color-border-muted); padding: 3px 6px; border-radius: 2px; background: var(--color-bg-base); }   .sc-text-link { display: inline-block; background: none; border: none; color: var(--color-primary-on-surface); cursor: pointer; font-size: 9pt; padding: 6px 8px; margin-top: 15px; border-radius: 3px; transition: background var(--duration-fast); } .sc-text-link:hover { background: var(--color-primary); color: var(--color-bg-base); } .sc-text-link:disabled { color: var(--color-text-disabled); cursor: default; } .sc-text-link:disabled:hover { background: none; color: var(--color-text-disabled); }         .sc-avatar-text {   color: var(--color-primary-dark); font-size: 16px; font-weight: bold; }   .sc-avatar-change-btn { display: flex; align-items: center; gap: 4px; padding: 3px 8px; margin: 5px 0; background: none; border: none; border-radius: 5px; cursor: pointer; font-size: 9pt; transition: background var(--duration-fast); } .sc-avatar-change-btn:hover { background: var(--color-primary); color: var(--color-bg-base); } .sc-avatar-change-btn:disabled { cursor: default; opacity: 0.5; } .sc-avatar-change-btn:disabled:hover { background: none; color: inherit; } .sc-avatar-plus { display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 2px solid #ccc; border-radius: 50%; font-size: 15px; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); line-height: 1; }   .sc-account-address-row { display: flex; align-items: center; gap: 5px; margin: 0 0 10px 5px; align-self: flex-start; } .sc-account-address { font-size: 11pt; } .sc-three-dot-btn { width: 18px; height: 18px; background: none; border: 1px solid var(--color-border-muted); border-radius: 5px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); transition: background var(--duration-fast); } .sc-three-dot-btn:hover { background: var(--color-border-default); }   .sc-popup-menu { background: var(--color-primary-dark); border-radius: 3px; padding: 4px 0; display: flex; flex-direction: column; align-self: flex-start; margin-left: 5px; margin-bottom: 6px; } .sc-popup-item { background: transparent; border: none; color: var(--color-bg-base); font-size: 13px; padding: 5px 14px; text-align: left; cursor: pointer; border-radius: 3px; margin: 2px 4px; transition: background var(--duration-fast); } .sc-popup-item:hover { background: var(--color-primary); } .sc-popup-item:disabled { opacity: 0.5; cursor: default; } .sc-popup-item:disabled:hover { background: transparent; } .sc-hint { font-size: 8pt; color: var(--color-text-tertiary); margin-top: 2px; }     .sc-addrchange { padding: 20px 24px 32px; display: flex; flex-direction: column; }   .sc-addr-steps { display: flex; align-items: flex-start; margin: 0 40px 28px; height: 48px; } .sc-addr-step { width: 80px; display: flex; flex-direction: column; align-items: center; } .sc-addr-step-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-border-default); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-sm); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; } .sc-addr-step-circle.active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-on-primary); } .sc-addr-step-label { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-addr-step-label-next { color: var(--color-text-tertiary); }   .sc-addr-step-line { flex: 1; height: 2px; margin-top: 15px; background: var(--color-border-default); } .sc-addr-step-line.active { background: var(--color-primary); }   .sc-addr-card { background: var(--color-bg-sunken); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px; } .sc-addr-card-label { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-bottom: 4px; } .sc-addr-current { font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sc-addr-diff { margin-bottom: 24px; } .sc-addr-old { font-size: var(--font-sm); color: var(--color-text-secondary); text-decoration: line-through; } .sc-addr-new-label { color: var(--color-primary-on-surface); margin: 0 0 2px; } .sc-addr-new { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .sc-addr-down { width: 12px; height: 12px; display: block; margin: 8px auto; color: var(--color-text-tertiary); } .sc-addr-field-label { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); margin-bottom: 8px; }   .sc-addrchange input.sc-addr-input { width: 100%; font-size: var(--font-base); color: var(--color-text-primary); padding: 8px 10px; } .sc-addr-hint { margin: 6px 0 0 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); opacity: .7; } .sc-addr-submit { margin-top: 24px; width: 100%; height: 38px; }   .sc-addr-sent { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 20px; background: var(--color-primary-surface, var(--color-bg-sunken)); } .sc-addr-check { width: 14px; height: 14px; margin-top: 1px; color: var(--color-primary-on-surface); flex: none; } .sc-addr-sent-text { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-success-dark, var(--color-primary)); }   .sc-addr-codeboxes { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }   .sc-addr-codeboxes input.sc-addr-codebox { width: 48px; height: 48px; border: 1.5px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-2xl); font-weight: var(--weight-bold); text-align: center; } .sc-addr-codeboxes.error input.sc-addr-codebox { border-color: var(--color-error); } .sc-addr-error { margin-top: 4px; text-align: center; font-size: var(--font-xs); color: var(--color-error); }   .sc-addr-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .sc-addr-back { font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-addr-back-mark { margin-right: 4px; color: var(--color-text-tertiary); } .sc-addr-resend { color: var(--color-primary-on-surface); }   .sc-addr-success { display: flex; flex-direction: column; align-items: center; margin-top: 48px; } .sc-addr-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-surface, var(--color-bg-sunken)); color: var(--color-primary-on-surface); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .sc-addr-success-icon svg { width: 28px; height: 28px; } .sc-addr-success-title { font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: 20px; } .sc-addr-success-card { padding: 12px 20px; margin-bottom: 0; text-align: center; } .sc-addr-down-text { margin: 4px 0; font-size: var(--font-sm); color: var(--color-text-tertiary); } .sc-addr-success-card .sc-addr-old { color: var(--color-text-tertiary); } .sc-addr-success-card .sc-addr-new { font-size: var(--font-base); }   .sc-verify-code { margin-top: 5px; } .sc-verify-code-row { display: flex; align-items: center; gap: 8px; }   .sc-verify-code input.sc-verify-code-input { width: 120px; font-size: var(--font-xl); color: var(--color-text-primary); }   .sc-verify-code input.sc-verify-code-input::placeholder { font-size: var(--font-sm); } .sc-verify-resend { margin-top: 2px; color: var(--color-primary-on-surface); } .sc-inline-error { margin: 8px 0 0; font-size: var(--font-xs); color: var(--color-error); }   .sc-footer-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-bottom: 8px; } .sc-btn-green { padding: 4px 20px; background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: 3px; cursor: pointer; font-size: 10pt; } .sc-btn-green:hover { background: var(--color-primary-dark); } .sc-btn-gray { padding: 4px 20px; background: var(--color-text-tertiary); color: var(--color-bg-base); border: none; border-radius: 3px; cursor: pointer; font-size: 10pt; } .sc-btn-gray:hover { background: #777; }   .sc-busy-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center; z-index: 1001; } .sc-spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid #fff; border-radius: 50%; animation: sc-spin 0.8s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } }   .sc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 24px; border-radius: 4px; font-size: 13px; z-index: 1002; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .sc-toast.success { background: var(--color-primary-surface); color: var(--color-primary-dark); border: 1px solid var(--color-primary); } .sc-toast.error { background: var(--color-error-surface); color: var(--color-error); border: 1px solid #ef5350; }   .overlimit-banner { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); margin: var(--space-3) var(--space-4); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .overlimit-text { display: flex; flex-direction: column; gap: var(--space-1); } .overlimit-title { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); } .overlimit-desc { font-size: var(--font-sm); color: var(--color-text-tertiary); } .overlimit-action { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; } .overlimit-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-overlimit { background: var(--color-primary); color: white; border: none; border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .btn-overlimit:hover { background: var(--color-primary-dark); }   .mask-controls { display: flex; justify-content: center; padding: var(--space-1) 0; margin: 0 var(--space-4); } .btn-mask { background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-xs); padding: 4px 14px; cursor: pointer; transition: all var(--duration-fast) var(--ease-default); } .btn-mask:hover { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .icon-12 { width: 12px; height: 12px; margin: 0 -2px 0 0; }   .sending-cancelled-banner { padding: 8px 12px; margin-top: var(--space-2); background: #FFF8F0; color: #e65100; border-radius: var(--radius-md); font-size: var(--font-sm); border: 1px solid #FFE0C0; }     .quote-item.synthetic-quote { opacity: 0.7; cursor: default; } .quote-item.synthetic-quote .quote-body-border { border: 1px solid var(--color-border-default); } .quote-hover-bar.is-hidden { display: none; }   .quote-body .body-line, .quote-body .body-quote-line, .quote-body-extended .body-line, .quote-body-extended .body-quote-line { line-height: 18px; white-space: pre-wrap; word-break: break-word; }   .quote-body .body-quote-line, .quote-body-extended .body-quote-line { border-left: 3px solid var(--color-border-muted); padding-left: 10px; color: var(--color-text-secondary); }   .body-mention-to { color: var(--color-primary-on-surface); font-weight: 700; } .body-mention-cc { color: var(--color-warning-dark, var(--color-warning)); font-weight: 700; }   .body-highlight {   background: rgba(255, 200, 0, 0.314); color: inherit; padding: 0; }   .body-highlight.body-highlight-current { background: var(--color-warning); }   .btn-body-extend { background: transparent; border: none; font-size: var(--font-sm); cursor: pointer; padding: var(--space-1) 0; text-align: left; } .btn-body-extend .quote-fold-open { color: var(--color-primary-dark, var(--color-primary)); margin-left: 10px; } .btn-body-extend .quote-fold-close { color: var(--color-text-secondary); } .btn-body-extend:hover { color: var(--color-primary-dark); }   .quote-body-extended { margin-left: 10px; font-size: var(--font-sm); color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word; line-height: 1.65; margin-top: var(--space-1); }   .checked-by-user { font-size: var(--font-xs); color: var(--color-text-disabled); margin-left: var(--space-1); margin-top: 1px; display: block; }     .sc-mailacct-panel, .sc-mailwiz-panel { position: relative; margin: 0 0 24px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; overflow: hidden; }   .sc-mailacct-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); } .sc-mailacct-head-title { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); }   .sc-mailpanel-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--color-text-secondary); cursor: pointer; } .sc-mailpanel-icon:hover { background: var(--color-bg-sunken); } .sc-mailacct-body { padding: 18px 20px 24px; } .sc-mailacct-count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; } .sc-mailacct-section-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); }   .sc-mailacct-counter { padding: 3px 9px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-secondary); }   .sc-mailacct-list { margin: 0; padding: 0; list-style: none; }   .sc-mailacct-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 13px 14px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); cursor: pointer; } .sc-mailacct-card:hover { border-color: var(--color-primary); } .sc-mailacct-card.is-primary { background: var(--color-primary-surface-light); border-color: var(--color-primary); } .sc-mailacct-main { min-width: 0; } .sc-mailacct-title-row { display: flex; align-items: center; gap: 8px; } .sc-mailacct-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); }   .sc-mailacct-pill { padding: 2px 8px; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: 700; } .sc-mailacct-address { margin-top: 2px; font-size: var(--font-sm); color: var(--color-text-secondary); word-break: break-all; } .sc-mailacct-primary-note { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-primary-dark); } .sc-mailacct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .sc-mailacct-chip { padding: 2px 7px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .sc-mailacct-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .sc-mailacct-setprimary { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: none; border-radius: 8px; background: transparent; color: var(--color-primary-dark); font-size: var(--font-xs); font-weight: 600; white-space: nowrap; cursor: pointer; } .sc-mailacct-setprimary:hover { background: var(--color-primary-surface-light); } .sc-mailacct-chevron { color: var(--color-text-tertiary); flex: none; } .sc-mailacct-empty { margin: 8px 0 0; font-size: var(--font-sm); color: var(--color-text-tertiary); }   .sc-mailacct-add { display: block; width: 100%; margin-top: 4px; padding: 11px; border: 1.5px solid var(--color-border-muted); border-radius: 10px; background: transparent; color: var(--color-primary-dark); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .sc-mailacct-add:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .sc-mailacct-add:disabled { opacity: 0.5; cursor: default; } .sc-mailacct-limit { margin: 8px 0 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .sc-mailwiz-head { display: flex; align-items: center; gap: 4px; padding: 14px 20px 4px; } .sc-mailwiz-title { flex: 1 1 auto; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); }   .sc-mailwiz-steps { display: flex; gap: 6px; padding: 0 20px 18px; } .sc-mailwiz-dot { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--color-border-default); } .sc-mailwiz-dot.is-on { background: var(--color-primary); } .sc-mailwiz-body { padding: 0 20px; } .sc-mailwiz-lead { margin: 0; font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); } .sc-mailwiz-sub { margin: 4px 0 16px; font-size: var(--font-sm); color: var(--color-text-secondary); } .sc-mailwiz-label { margin: 0 0 6px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); } .sc-mailwiz-optional { margin-left: 6px; font-weight: 400; color: var(--color-text-tertiary); } .sc-mailwiz-sublabel { margin: 10px 0 5px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-secondary); } .sc-mailwiz-note { margin: 6px 0 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .sc-mailwiz-ok-note { margin: -8px 0 16px; font-size: var(--font-2xs); color: var(--color-primary-dark); } .sc-mailwiz-reason { margin: 10px 0 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sc-mailwiz-skip { margin-top: 14px; padding: 7px 10px; border: none; border-radius: 8px; background: transparent; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); cursor: pointer; } .sc-mailwiz-skip:hover { background: var(--color-bg-sunken); } .sc-mailwiz-testmail { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: transparent; font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-dark); cursor: pointer; } .sc-mailwiz-testmail:hover { background: var(--color-primary-surface-light); } .sc-mailwiz-testmail:disabled { opacity: .5; cursor: default; } .sc-mailwiz-chiprow { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; } .sc-mailwiz-chip { padding: 5px 12px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-sunken); font-size: var(--font-sm); color: var(--color-text-secondary); } .sc-mailwiz-chip-edit { padding: 5px 8px; border: none; border-radius: 8px; background: transparent; color: var(--color-primary-dark); font-size: var(--font-xs); font-weight: 600; cursor: pointer; } .sc-mailwiz-chip-edit:hover { background: var(--color-primary-surface-light); } .sc-mailwiz-password { position: relative; display: flex; align-items: center; } .sc-mailwiz-password .settings-input { padding-right: 42px; } .sc-mailwiz-eye { position: absolute; right: 4px; }   .sc-mailwiz-pwcard { margin-top: 16px; border: 1px solid transparent; border-radius: 12px; } .sc-mailwiz-pwcard.is-found { padding: 13px 14px 15px; background: var(--color-primary-surface-light); border-color: var(--color-primary-muted); } .sc-mailwiz-found-caption { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-dark); } .sc-mailwiz-found-text { margin: 8px 0 0; font-size: var(--font-2xs); color: var(--color-primary-dark); }   .sc-mailwiz-warn { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: var(--font-xs); color: var(--color-warning-dark); } .sc-mailwiz-warn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning-dark); flex: none; } .sc-mailwiz-manual-toggle { display: flex; align-items: center; width: 100%; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-elevated); cursor: pointer; text-align: left; } .sc-mailwiz-manual-toggle:hover { border-color: var(--color-primary); } .sc-mailwiz-chevron { color: var(--color-text-tertiary); font-size: var(--font-sm); } .sc-mailwiz-manual-label { flex: 1 1 auto; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); } .sc-mailwiz-manual-hint { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sc-mailwiz-manual { margin-top: 10px; padding: 14px 16px 16px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); } .sc-mailwiz-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .sc-mailwiz-group-title { font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); }   .sc-mailwiz-seg { display: inline-flex; padding: 2px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); } .sc-mailwiz-seg-item { position: relative; padding: 5px 16px; border-radius: 6px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); cursor: pointer; } .sc-mailwiz-seg-item.is-on { background: var(--color-bg-base); color: var(--color-primary-dark); } .sc-mailwiz-seg-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .sc-mailwiz-pair { display: flex; align-items: flex-end; gap: 12px; } .sc-mailwiz-pair-main { flex: 1 1 auto; min-width: 0; } .sc-mailwiz-pair-port { flex: 0 0 96px; } .sc-mailwiz-divider { height: 1px; margin: 16px 0 12px; background: var(--color-border-default); }   .sc-mailwiz-done { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; padding: 14px; border: 1px solid var(--color-primary-muted); border-radius: 12px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-sm); font-weight: 600; } .sc-mailwiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 20px 20px; } .sc-mailwiz-back { padding: 11px 14px; border: none; border-radius: 10px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .sc-mailwiz-back:hover { background: var(--color-bg-sunken); } .sc-mailwiz-primary { margin-left: auto; padding: 11px 24px; border: none; border-radius: 10px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .sc-mailwiz-primary:hover { background: var(--color-primary-dark); } .sc-mailwiz-primary:disabled { opacity: 0.5; cursor: default; }   .sc-mailwiz-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-overlay-black-70); } .sc-mailwiz-busy-text { padding: 20px 30px; border-radius: 16px; background: var(--color-bg-elevated); color: var(--color-text-primary); font-size: var(--font-sm); font-weight: 600; }     .sc-uawiz-overlay {   position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; background: var(--color-bg-base); }   .sc-uawiz-panel { position: relative; width: 100%; max-width: 560px; margin: 32px 16px; padding: 20px 24px 24px; border-radius: 12px; background: var(--color-bg-base); }   .sc-uawiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; } .sc-uawiz-seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--color-border-default); } .sc-uawiz-seg.is-on { background: var(--color-primary); } .sc-uawiz-count { flex: none; margin-left: 4px; color: var(--color-text-tertiary); font-size: var(--font-2xs); }   .sc-uawiz-avatar-preview { width: 56px; height: 56px; margin: 6px auto 16px; border: 1px solid var(--color-border-muted); border-radius: 50%; overflow: hidden; } .sc-uawiz-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }   .sc-uawiz-avatar-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 104px; overflow-y: auto; } .sc-uawiz-avatar-item { display: block; padding: 3px; border: 2px solid transparent; border-radius: 24px; background: transparent; cursor: pointer; } .sc-uawiz-avatar-item.is-on { border-color: var(--color-primary); } .sc-uawiz-avatar-item img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }   .sc-uawiz-pillwrap { position: relative; display: flex; justify-content: center; margin-top: 14px; } .sc-uawiz-pill { padding: 5px 12px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .sc-uawiz-pill:hover { border-color: var(--color-primary); } .sc-uawiz-pill-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }   .sc-uawiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; } .sc-uawiz-foot-right { justify-content: flex-end; }   .sc-uawiz-skip { display: block; margin: 12px auto 0; padding: 4px 6px; border: none; border-bottom: 1px solid transparent; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-xs); cursor: pointer; } .sc-uawiz-skip:hover { border-bottom-color: var(--color-text-secondary); color: var(--color-text-secondary); }   .sc-uawiz-card { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-sm); } .sc-uawiz-passnote-lead { margin: 0; } .sc-uawiz-passnote-lead b { color: var(--color-text-primary); font-weight: 600; } .sc-uawiz-passnote-sub { margin: 8px 0 0; color: var(--color-text-tertiary); font-size: var(--font-xs);   white-space: pre-line; }   .sc-uawiz-summary { margin-top: 16px; } .sc-uawiz-summary-row { display: flex; align-items: center; gap: 8px; margin: 11px 0; } .sc-uawiz-summary-label { flex: 0 0 88px; color: var(--color-text-tertiary); font-size: var(--font-xs); } .sc-uawiz-summary-avatar { width: 32px; height: 32px; border: 1px solid var(--color-border-muted); border-radius: 50%; overflow: hidden; } .sc-uawiz-summary-avatar img { width: 100%; height: 100%; object-fit: cover; } .sc-uawiz-summary-value { min-width: 0; overflow: hidden; color: var(--color-text-primary); font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; } .sc-uawiz-summary-sep { height: 1px; background: var(--color-border-default); }     .sc-imp-overlay { position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: var(--color-overlay-black-50); }   .sc-imp-dialog { display: flex; flex-direction: column; width: 100%; max-width: 510px; max-height: 550px; margin: 16px; border-radius: 5px; background: var(--color-bg-base); overflow: hidden; }   .sc-imp-head { display: flex; align-items: center; height: 50px; padding: 0 20px; background: var(--color-primary-light); color: var(--color-text-primary); font-size: var(--font-lg); } .sc-imp-lead { margin: 5px 20px 0; color: var(--color-text-primary); font-weight: 600; } .sc-imp-list { flex: 1 1 auto; margin: 10px; padding: 0; list-style: none; overflow-y: auto; } .sc-imp-row { display: flex; align-items: center; gap: 5px; width: 100%; height: 30px; padding: 2px 5px; border: none; background: var(--color-bg-base); cursor: pointer; text-align: left; } .sc-imp-row:hover { background: var(--color-bg-sunken); } .sc-imp-row.is-on { background: var(--color-primary-surface); } .sc-imp-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); overflow: hidden; } .sc-imp-avatar img { width: 100%; height: 100%; object-fit: cover; } .sc-imp-name { flex: 0 0 150px; overflow: hidden; font-size: var(--font-xs); text-overflow: ellipsis; white-space: nowrap; } .sc-imp-address { flex: 0 0 120px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-xs); text-overflow: ellipsis; white-space: nowrap; } .sc-imp-tag { flex: none; color: var(--color-text-tertiary); font-size: var(--font-xs); } .sc-imp-foot { display: flex; justify-content: flex-end; gap: 10px; margin: 20px; }   .sc-scope-option { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; cursor: pointer; } .sc-scope-note { color: var(--color-text-tertiary); font-size: 12px; }   .sc-guest-badge { background: var(--color-bg-sunken); color: var(--color-text-secondary); border-radius: 9px; padding: 1px 8px; font-size: 12px; font-weight: var(--weight-bold); } .sc-theme-list { max-height: 170px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: 6px; } .sc-theme-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer; } .sc-theme-row + .sc-theme-row { border-top: 1px solid var(--color-border-default); } .sc-scope-help { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 12px; } 
/*css/screens/10-message-overrides.css*/
   [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-text-secondary); color: var(--color-bg-base); padding: 6px 10px; border-radius: var(--radius-md); font-size: var(--font-xs); font-weight: var(--weight-medium); white-space: pre-line; max-width: 280px; line-height: 1.5; box-shadow: 0 4px 12px var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), visibility var(--duration-fast); z-index: var(--z-popover); pointer-events: none; } [data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } [data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); } [data-tooltip-pos="left"]::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translateY(-50%) translateX(4px); } [data-tooltip-pos="left"]:hover::after { transform: translateY(-50%) translateX(0); }     @keyframes panel-open { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }   .message-detail { animation: panel-open var(--duration-normal) var(--ease-default); } .detail-inhouse, .detail-email { animation: panel-open var(--duration-normal) var(--ease-default); } .message-list { animation: panel-open var(--duration-fast) var(--ease-default); }   .reply-button-group { display: flex; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px var(--shadow-sm); margin-left: auto; } .btn-reply-compose { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--color-primary); color: white; border: none; cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-semibold); transition: background var(--duration-fast) var(--ease-default); } .btn-reply-compose:hover { background: var(--color-primary-dark); } .btn-reply-compose img { width: 12px; height: 12px; } .btn-reply-dropdown { padding: 0 10px; background: var(--color-primary); color: white; border: none; border-left: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; font-size: 9px; display: flex; align-items: center; transition: background var(--duration-fast) var(--ease-default); } .btn-reply-dropdown:hover { background: var(--color-primary-dark); }   .reply-dropdown-menu { position: absolute; bottom: calc(100% + 8px); right: 60px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 8px 24px var(--shadow-lg); z-index: var(--z-sticky); min-width: 180px; padding: var(--space-1); animation: panel-open var(--duration-fast) var(--ease-default) forwards; } .reply-dropdown-menu button { display: block; width: 100%; padding: 10px 14px; background: transparent; border: none; color: var(--color-text-secondary); font-size: var(--font-base); text-align: left; cursor: pointer; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-default); } .reply-dropdown-menu button:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .reply-dropdown-overlay { position: fixed; inset: 0; z-index: 99; }   .inhouse-action-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-default); position: relative; background: var(--color-bg-base); flex-shrink: 0; gap: var(--space-2); } .inhouse-action-bar .btn-action-icon { background: var(--color-bg-sunken); border-radius: var(--radius-md); padding: 6px; transition: background var(--duration-fast) var(--ease-default); } .inhouse-action-bar .btn-action-icon:hover { background: var(--color-primary-surface); } .inhouse-action-bar .btn-action-icon img { filter: none; opacity: 0.6; } .inhouse-action-bar .btn-action-icon:hover img { opacity: 1; }   .attachment-context-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 8px 24px var(--shadow-lg); min-width: 200px; padding: var(--space-1); animation: panel-open var(--duration-fast) var(--ease-default) forwards; }   .attachment-context-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: transparent; border: none; color: var(--color-text-secondary); font-size: var(--font-sm); text-align: left; cursor: pointer; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-default); } .attachment-context-menu button > span { color: var(--color-text-primary); } .attachment-context-menu button:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }   .quote-selected-dot { width: 3px; height: 100%; min-height: 20px; border-radius: var(--radius-full); background: var(--color-primary); position: absolute; left: -10px; top: 0; }   .quote-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 60px 0; color: var(--color-text-tertiary); font-size: var(--font-sm); } @keyframes spin-gentle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinning-logo { width: 40px; height: 40px; animation: spin-gentle 2s linear infinite; } .loading-spinner { width: 24px; height: 24px; border: 3px solid var(--color-border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } 
/*css/screens/11-cabinet.css*/
  .cabinet-layout { display: flex; height: 100%; overflow: hidden; gap: 1px; background: var(--color-border-default); } .cabinet-search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-sm); outline: none; background: var(--color-bg-sunken); transition: border-color var(--duration-fast) var(--ease-default); } .cabinet-search-input:focus { border-color: var(--color-primary); background: var(--color-bg-base); }   .cabinet-file-panel {   display: contents; } .cabinet-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }   .cabinet-file-list { flex: 1; overflow-y: auto; padding: 0; }   .cabinet-file-row { display: flex; align-items: center; min-height: 25px; padding: 0 4px; border-radius: 0; transition: background var(--duration-fast) var(--ease-default); } .cabinet-file-row:hover { background: var(--color-bg-sunken); border-left-color: var(--color-primary-muted); }   .cabinet-file-row.selected { border-left-color: var(--color-primary); }   .cabinet-status-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .cabinet-status-sync { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .cabinet-status-refresh { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--color-text-secondary); cursor: pointer; } .cabinet-status-refresh:hover { background: var(--color-bg-sunken); }   .cabinet-status-promote { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 2px 6px; border: none; border-radius: 5px; background: none; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .cabinet-status-promote:hover { background: var(--color-bg-sunken); }   .cabinet-col-resizer { width: 6px; flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: transparent; touch-action: none; } .cabinet-col-resizer:hover { background: var(--color-border-default); }   .cabinet-ctx-item.is-access-focus { background: var(--color-bg-sunken); outline: 1px solid var(--color-primary); outline-offset: -1px; }   .cabinet-rubber-band { position: fixed; z-index: 1200; pointer-events: none;   background: color-mix(in srgb, var(--color-primary) 25%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent); }   .cabinet-file-row.is-caret { outline: 1px solid var(--color-primary); outline-offset: -1px; } .cabinet-file-row.is-folder { cursor: pointer; } .cabinet-col-name { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; cursor: pointer; } .cabinet-col-size {   width: var(--cab-col-size, 60px); font-size: var(--font-xs); color: var(--color-text-secondary); text-align: left; flex-shrink: 0; padding: 0 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cabinet-col-date { width: var(--cab-col-date, 90px); font-size: var(--font-xs); color: var(--color-text-secondary); text-align: left; flex-shrink: 0; padding: 0 0 0 8px; white-space: nowrap; overflow: hidden; }   .cabinet-col-type { width: var(--cab-col-type, 70px); font-size: var(--font-xs); color: var(--color-text-secondary); text-align: left; flex-shrink: 0; padding: 0 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .cabinet-col-folder { width: var(--cab-col-folder, 100px); font-size: var(--font-xs); color: var(--color-text-secondary); text-align: left; flex-shrink: 0; padding: 0 0 0 8px; overflow: hidden; white-space: nowrap; } .cabinet-folder-cell { max-width: 100%; padding: 0; border: none; background: none; font: inherit; color: var(--color-text-secondary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cabinet-folder-cell:hover { color: var(--color-primary-on-surface); text-decoration: underline; }   .cabinet-col-actions { width: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cabinet-row-menu { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--color-text-tertiary); cursor: pointer; } .cabinet-row-menu:hover { background: var(--color-border-default); color: var(--color-text-primary); } .cabinet-row-menu-icon { fill: currentColor; } .cabinet-file-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;   position: relative; }   .cabinet-file-shortcut { position: absolute; left: 0; bottom: 0; width: 11px; height: 11px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-elevated); border: 0.5px solid var(--color-border-default); border-radius: 2px; color: var(--color-primary-on-surface); pointer-events: none; } .cabinet-file-shortcut.is-missing { color: var(--color-error); } .cabinet-file-name { font-size: var(--font-xs); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cabinet-btn-action { background: none; border: none; cursor: pointer; padding: 4px; font-size: var(--font-sm); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-secondary); transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast), transform var(--duration-fast); display: inline-flex; align-items: center; justify-content: center; } .cabinet-btn-action:hover { background: var(--color-border-default); color: var(--color-primary-on-surface); transform: scale(1.1); } .cabinet-btn-delete:hover { background: var(--color-error-surface); color: var(--color-error); }   .cabinet-file-checkbox { width: 14px; height: 14px; margin: 0 2px; cursor: pointer; flex-shrink: 0; accent-color: var(--color-primary); visibility: hidden; } .cabinet-file-row.selected .cabinet-file-checkbox { visibility: visible; } .cabinet-btn-small { padding: 2px 8px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); background: var(--color-bg-base); cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .cabinet-btn-small:hover { background: var(--color-bg-sunken); }   .cabinet-sortable { cursor: pointer; user-select: none; } .cabinet-sortable:hover { color: var(--color-primary-on-surface); } .cabinet-rename-input { flex: 1; border: none; border-bottom: 2px solid var(--color-primary); outline: none; font-size: var(--font-sm); padding: 2px 0; background: transparent; }   .cabinet-loading { display: flex; justify-content: center; padding: 40px; } .cabinet-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--color-text-disabled); font-size: var(--font-sm); }   .cabinet-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.15); z-index: var(--z-popover); } .cabinet-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-bg-base); border-radius: var(--radius-xl); box-shadow: 0 12px 40px var(--shadow-lg); padding: var(--space-6); z-index: 501; min-width: 320px; animation: cabinet-dialog-open var(--duration-fast) var(--ease-default) forwards; } @keyframes cabinet-dialog-open { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }   @keyframes cabinet-menu-open { 0%, 40% { opacity: 0; } 100% { opacity: 1; } } .cabinet-dialog h3 { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); }   .cabinet-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .cabinet-dialog-head h3 { margin-bottom: 0; } .cabinet-dialog-close { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-secondary); font-size: var(--font-base); line-height: 1; cursor: pointer; } .cabinet-dialog-close:hover { background: var(--color-bg-elevated); } .cabinet-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); } .cabinet-btn-cancel { padding: 6px 16px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .cabinet-btn-cancel:hover { background: var(--color-border-default); } .cabinet-btn-ok { padding: 6px 20px; background: var(--color-primary); border: none; border-radius: var(--radius-md); color: white; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .cabinet-btn-ok:hover { background: var(--color-primary-dark); } .cabinet-btn-ok:disabled { opacity: 0.5; cursor: not-allowed; } .compliance-dialog-wide { width: min(700px, 90vw); max-height: 80vh; overflow-y: auto; }   .project-settings-dialog { width: min(520px, 90vw); max-height: 80vh; overflow-y: auto; } .project-settings-form { display: flex; flex-direction: column; gap: 14px; } .project-settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .project-settings-field { display: flex; flex-direction: column; gap: 4px; } .project-settings-field label { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .project-settings-field .settings-select, .project-settings-field .settings-input, .project-settings-field .settings-textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-sm); transition: border-color var(--duration-fast) var(--ease-default); } .project-settings-field .settings-select:focus, .project-settings-field .settings-input:focus, .project-settings-field .settings-textarea:focus { border-color: var(--color-primary); outline: none; } .project-settings-message { font-size: var(--font-sm); padding: 6px 10px; border-radius: var(--radius-md); margin-top: 4px; } .project-settings-message.success { background: var(--color-success-surface); color: #2e7d32; } .project-settings-message.error { background: #fce4ec; color: var(--color-error); } @media (max-width: 480px) { .project-settings-row { grid-template-columns: 1fr; } }   .tcfg-dialog { width: min(560px, 92vw); max-height: 84vh; display: flex; flex-direction: column; padding: 0; } .tcfg-head { display: flex; align-items: center; gap: 8px; padding: 16px 24px; background: var(--color-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .tcfg-head-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcfg-head-actions { display: flex; align-items: center; gap: 6px; } .tcfg-head-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--color-text-on-primary); } .tcfg-head-btn:hover { background: var(--color-overlay-white-20); } .tcfg-body { flex: 1 1 auto; overflow-y: auto; padding: 28px 32px; }   .tcfg-foot { display: flex; justify-content: flex-end; padding: 16px 32px; border-top: 1px solid var(--color-border-default); } .tcfg-foot-create { padding: 9px 24px; }   .tcfg-contact-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .tcfg-contact-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .tcfg-contact-pair { display: flex; align-items: center; gap: 6px; } .tcfg-contact-pair .tcfg-input { flex: 1 1 0; min-width: 0; } .tcfg-contact-errors { margin: 0; padding-left: 18px; font-size: var(--font-xs); color: var(--color-error); } .tcfg-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .tcfg-back:hover { background: var(--color-primary-surface); }   .cabinet-tree-item.cabinet-tree-theme { min-height: 32px; } .cabinet-tree-theme-avatar { width: 18px; height: 18px; flex: 0 0 18px; margin-right: 6px; border-radius: var(--radius-sm); object-fit: cover; } .cabinet-tree-theme-avatar.is-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 10px; font-weight: var(--weight-semibold); }   .tcfg-savestatus { align-self: flex-end; margin: 0 0 14px auto; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--color-bg-sunken); font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); width: fit-content; } .tcfg-savestatus-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-tertiary); } .tcfg-savestatus.is-saved { background: var(--color-success-surface); color: var(--color-success-dark); } .tcfg-savestatus.is-saved .tcfg-savestatus-dot { background: var(--color-success); } .tcfg-savestatus.is-saving { background: var(--color-warning-surface); color: var(--color-warning-dark); } .tcfg-savestatus.is-saving .tcfg-savestatus-dot { background: var(--color-warning); } .tcfg-savestatus.is-error { background: var(--color-error-surface); color: var(--color-error-on-surface); } .tcfg-savestatus.is-error .tcfg-savestatus-dot { background: var(--color-error); }   .tcfg-title-error { margin: 4px 0 0 2px; font-size: var(--font-xs); color: var(--color-error); white-space: pre-wrap; } .tcfg-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .tcfg-avatar { position: relative; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--color-text-on-primary); font-size: var(--font-2xl); font-weight: var(--weight-semibold); } .tcfg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }   .tcfg-avatar.is-editable { cursor: pointer; } .tcfg-avatar-camera { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); }   .tcfg-avatar-catbadge { position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-bg-base); overflow: hidden; background: var(--color-bg-base); } .tcfg-avatar-catbadge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .tcfg-avatar-actions { display: flex; gap: 8px; margin-bottom: 16px; } .tcfg-avatar-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: 999px; background: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tcfg-avatar-chip:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); } .tcfg-avatar-chip:disabled { opacity: 0.5; cursor: default; } .tcfg-avatar-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--color-bg-elevated); } .tcfg-avatar-spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--color-border-muted); border-top-color: var(--color-primary); animation: spin 0.9s linear infinite; } .tcfg-avatar-progress-title { font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); } .tcfg-avatar-progress-desc { margin-top: 1px; font-size: var(--font-xs); color: var(--color-text-secondary); } .tcfg-avatar-cancel { padding: 4px 8px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-tertiary); text-decoration: underline; } .tcfg-avatar-progress-count { grid-column: 2 / 4; margin-top: 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tcfg-avatar-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .tcfg-avatar-candidate { width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer; border: 2px solid var(--color-border-default); border-radius: 12px; background: transparent; } .tcfg-avatar-candidate:hover { border-color: var(--color-primary); } .tcfg-avatar-candidate img { width: 100%; height: 100%; object-fit: cover; display: block; } .tcfg-avatar-skeleton { width: 64px; height: 64px; border-radius: 12px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); animation: skeleton-pulse 1.5s ease-in-out infinite; } .tcfg-simple-row { display: flex; align-items: center; gap: 14px; } .tcfg-simple-row .settings-input { flex: 1 1 auto; } .tcfg-simple-avatar { position: relative; flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tcfg-simple-avatar-initial { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-white); } .tcfg-simple-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tcfg-simple-avatar-busy { position: absolute; inset: 0; border-radius: 50%; background: var(--color-overlay-black-50); display: flex; align-items: center; justify-content: center; } .tcfg-simple-avatar-edit { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-base); border: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .tcfg-simple-avatar:hover .tcfg-simple-avatar-edit { border-color: var(--color-primary); } .tcfg-simple-hint { margin: 8px 0 0 70px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-simple-panel { margin: 12px 0 0 70px; padding: 12px 14px; border-radius: 10px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .tcfg-simple-panel-title { margin-bottom: 8px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tcfg-simple-candidates { display: flex; flex-wrap: wrap; gap: 8px; } .tcfg-simple-candidate { width: 48px; height: 48px; margin-bottom: 8px; padding: 0; overflow: hidden; cursor: pointer; border: 2px solid var(--color-border-default); border-radius: 50%; background: transparent; } .tcfg-simple-candidate:hover { border-color: var(--color-primary); } .tcfg-simple-candidate img { width: 100%; height: 100%; object-fit: cover; display: block; } .tcfg-simple-panel-actions { display: flex; gap: 10px; } .tcfg-title-col { flex: 1 1 auto; min-width: 0; } .tcfg-title-view { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .tcfg-title-meta { display: flex; align-items: center; gap: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-cat-pill { padding: 2px 8px; border-radius: 4px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-weight: var(--weight-bold); } .tcfg-title-input { width: 100%; border: 0; background: transparent; padding: 2px 0; font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .tcfg-hub { display: flex; flex-direction: column; gap: 10px; } .tcfg-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 12px; } .tcfg-card:hover { border-color: var(--color-primary); background: var(--color-primary-surface); }   .tcfg-card.is-recommended { border: 2px solid var(--color-primary); }   .tcfg-guide { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--color-primary-surface); font-size: var(--font-sm); color: var(--color-primary-dark); } .tcfg-guide-icon { flex: 0 0 auto; margin-top: 1px; color: var(--color-primary-on-surface); } .tcfg-card-tile { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .tcfg-card-tile-muted { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .tcfg-card-tile-warn { background: var(--color-warning-surface); color: var(--color-warning); } .tcfg-card-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tcfg-card-name { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-card-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcfg-card-chev { flex: 0 0 auto; color: var(--color-text-disabled); } .tcfg-section { display: flex; flex-direction: column; gap: 14px; } .tcfg-section-title { font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-primary); } .tcfg-ask { padding: 18px 20px; border-radius: 10px; background: var(--color-primary-surface-light); } .tcfg-ask-head { font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 4px; } .tcfg-ask-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-field { display: flex; flex-direction: column; gap: 6px; } .tcfg-field-label { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tcfg-field-hint { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-view-text { font-size: var(--font-sm); color: var(--color-text-primary); white-space: pre-wrap; } .tcfg-input { width: 100%; } .tcfg-memo-count { align-self: flex-end; font-size: 10px; color: var(--color-text-tertiary); } .tcfg-collapsible { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 11px; } .tcfg-collapsible-label { flex: 1 1 auto; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tcfg-collapsible-pill { padding: 4px 10px; border-radius: 10px; background: var(--color-primary-surface); border: 1px solid var(--color-primary); color: var(--color-primary-dark); font-size: var(--font-xs); font-weight: var(--weight-semibold); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcfg-choices { margin-top: 10px; padding: 14px; border-radius: 11px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .tcfg-choices-head { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 4px; } .tcfg-choices-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-bottom: 14px; } .tcfg-chips { display: flex; flex-wrap: wrap; gap: 10px; } .tcfg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 8px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-chip:hover { background: var(--color-primary-surface); border-color: var(--color-primary); } .tcfg-chip.is-on { background: var(--color-primary-surface); border: 2px solid var(--color-primary); color: var(--color-primary-dark); } .tcfg-more { align-self: flex-start; margin-top: 4px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .tcfg-more:hover { background: var(--color-primary-surface); } .tcfg-toggle-card { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 10px; background: var(--color-bg-sunken); color: var(--color-text-secondary); } .tcfg-toggle-text { flex: 1 1 auto; font-size: var(--font-sm); color: var(--color-text-primary); } .tcfg-switch { position: relative; display: inline-flex; width: 34px; height: 17px; flex: 0 0 34px; } .tcfg-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .tcfg-switch input:disabled { cursor: default; } .tcfg-switch input:disabled + .tcfg-switch-track { opacity: 0.5; } .tcfg-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--color-border-default); transition: background var(--duration-fast) var(--ease-default); pointer-events: none; } .tcfg-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-bg-base); transition: transform var(--duration-fast) var(--ease-default); } .tcfg-switch input:checked + .tcfg-switch-track { background: var(--color-primary); } .tcfg-switch input:checked + .tcfg-switch-track::after { transform: translateX(17px); } .tcfg-list { display: flex; flex-direction: column; gap: 6px; } .tcfg-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg-sunken); } .tcfg-row-col { flex: 1 1 auto; min-width: 0; } .tcfg-row-inline { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } .tcfg-row-name { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-row-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-top: 2px; } .tcfg-attr-pill { padding: 2px 6px; border-radius: 4px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-xs); } .tcfg-row-del { width: 22px; height: 22px; flex: 0 0 22px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; } .tcfg-row-del:hover { background: var(--color-border-default); }   .tcfg-row.is-clickable { cursor: pointer; } .tcfg-row.is-clickable:hover { background: var(--color-border-default); } .tcfg-row-edit { flex-wrap: wrap; cursor: default; } .tcfg-row-edit .tcfg-input { flex: 1 1 160px; min-width: 0; } .tcfg-row-edit-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); white-space: nowrap; } .tcfg-row-edit-required { color: var(--color-error); margin-left: 2px; } .tcfg-row-edit-actions { flex: 1 0 100%; display: flex; justify-content: flex-end; gap: 8px; } .tcfg-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; cursor: pointer; background: transparent; border: 1px dashed var(--color-primary); border-radius: 14px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .tcfg-add:hover { background: var(--color-primary-surface); } .tcfg-kw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-sm); font-weight: var(--weight-semibold); } .tcfg-kw-del { width: 16px; height: 16px; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--color-primary-dark); display: inline-flex; align-items: center; justify-content: center; }   .tcfg-kw.is-clickable { cursor: pointer; } .tcfg-kw.is-clickable:hover { background: var(--color-primary-muted); } .tcfg-kw-edit { flex-wrap: wrap; cursor: default; } .tcfg-kw-edit .tcfg-input { flex: 1 1 140px; min-width: 0; } .tcfg-kw-add { display: flex; align-items: center; gap: 8px; } .tcfg-kw-add .tcfg-input { flex: 1 1 auto; } .tcfg-kw-hash { font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .tcfg-hint { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-q { font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-q-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-suggest { display: flex; flex-direction: column; gap: 4px; } .tcfg-suggest-head { display: flex; align-items: center; gap: 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-ai-assist-accent); } .tcfg-suggest-row { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; background: var(--color-ai-assist-surface); border: 1px solid var(--color-ai-assist-border); } .tcfg-suggest-word { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-suggest-spacer { flex: 1 1 auto; } .tcfg-approve { padding: 3px 12px; border: 0; border-radius: var(--radius-sm); cursor: pointer; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); } .tcfg-reject { padding: 3px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); cursor: pointer; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); } .tcfg-suggest-note { font-size: 10px; color: var(--color-text-tertiary); } .compliance-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; } .compliance-stat-card { background: var(--color-bg-sunken); border-radius: 8px; padding: 12px; text-align: center; } .compliance-stat-value { font-size: 24px; font-weight: var(--weight-bold); color: var(--color-info); } .compliance-stat-label { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; } .compliance-hash-info { font-size: 12px; color: var(--color-text-secondary); padding: 6px 0; } .compliance-log-table { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: 4px; } .compliance-log-header { display: flex; background: var(--color-bg-sunken); font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); padding: 6px 8px; border-bottom: 1px solid var(--color-border-default); position: sticky; top: 0; } .compliance-log-row { display: flex; font-size: 12px; padding: 5px 8px; border-bottom: 1px solid rgba(0,0,0,0.04); } .compliance-log-row:hover { background: var(--color-bg-elevated); } .cl-date { flex: 0 0 140px; } .cl-op { flex: 0 0 80px; } .cl-user { flex: 0 0 100px; } .cl-file { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-hash { flex: 0 0 180px; font-family: monospace; font-size: 10px; overflow: hidden; text-overflow: ellipsis; } .cl-size { flex: 0 0 80px; text-align: right; } .cl-ver { flex: 0 0 40px; text-align: center; } .cl-status { flex: 0 0 60px; text-align: center; } .status-current { color: var(--color-success); font-weight: var(--weight-semibold); } .status-ok { color: var(--color-success); font-weight: var(--weight-semibold); } .status-ng { color: var(--color-error); font-weight: var(--weight-semibold); } .compliance-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .compliance-form label { font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .compliance-form input, .compliance-form select { padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 4px; font-size: 13px; } .compliance-form input:focus, .compliance-form select:focus { outline: none; border-color: var(--color-info); } .compliance-search-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; } .compliance-search-row { display: flex; align-items: center; gap: 8px; } .compliance-search-row label { flex: 0 0 80px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .compliance-search-row input { flex: 1; padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: 4px; font-size: 12px; } .compliance-search-row span { color: var(--color-text-disabled); } .compliance-search-actions { display: flex; justify-content: flex-end; gap: 8px; }   @media (max-width: 480px) { .sc-card { width: 100%; border-radius: 0; } .sc-header { border-radius: 0; } }   .cabinet-context-overlay { position: fixed; inset: 0; z-index: var(--z-toast); }   .move-dialog-tree { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); margin-bottom: var(--space-3); } .move-dialog-node { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: var(--font-sm); color: var(--color-text-secondary); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .move-dialog-node:hover { background: var(--color-bg-sunken); } .move-dialog-node.selected { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .trash-list { max-height: 400px; overflow-y: auto; } .trash-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border-default); font-size: var(--font-sm); } .trash-item:last-child { border-bottom: none; } .trash-item-name { flex: 1; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trash-item-size { flex-shrink: 0; font-size: var(--font-xs); color: var(--color-text-tertiary); width: 70px; text-align: right; } .trash-item-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }   .tcfg-parties { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .tcfg-parties-head { display: flex; align-items: center; gap: 8px; } .tcfg-parties-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tcfg-parties-badge { padding: 1px 6px; border-radius: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); background: var(--color-bg-base); border: 1px solid var(--color-border-default); } .tcfg-parties-note { margin: 4px 0 10px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tcfg-party-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; margin-bottom: 8px; align-items: center; } .tcfg-party-row .settings-input.is-invalid { border-color: var(--color-error); } .tcfg-parties-add { padding: 4px; } @media (max-width: 600px) { .tcfg-party-row { grid-template-columns: 1fr; } } .tcfg-party-same { margin: -2px 0 10px 118px; padding: 6px 10px; border-radius: 8px; font-size: var(--font-xs); color: var(--color-text-primary); background: var(--color-warning-surface); } .tcfg-party-same-actions { display: flex; gap: 8px; margin-top: 6px; } @media (max-width: 600px) { .tcfg-party-same { margin-left: 0; } } 
/*css/screens/12-message-order.css*/
   .compose-subject-multiline { width: 100%; min-height: 24px; max-height: 60px; resize: none; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: 3px; padding: 4px 8px; font-size: 9pt; font-family: inherit; line-height: 1.4; }   .attachment-size { font-size: 7pt; color: var(--color-text-disabled); margin-left: 4px; }   .sp-context-menu { display: none; position: fixed; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px; z-index: var(--z-skip); padding: 4px 0; } .sp-context-menu .ctx-item { padding: 6px 16px; cursor: pointer; font-size: 9pt; display: flex; align-items: center; gap: 8px; } .sp-context-menu .ctx-item:hover { background: #f0f5f0; }   .message-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }   .compose-field-error { font-size: 8pt; color: var(--color-error); margin-top: 2px; } .order-status-badge { font-size: 11px; font-weight: var(--weight-bold); padding: 2px 10px; border-radius: var(--radius-full); color: white; } .order-status-started { background: #42a5f5; } .order-status-complete { background: var(--color-primary); }   .order-status-shipped { background: var(--color-info); } .order-status-canceled { background: var(--color-text-tertiary); }   .order-status-canceled-shipped { background: var(--color-warning); } .order-doc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--font-sm); } .order-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d0d7f2; }   .order-action-inline { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,0.1); text-align: left; white-space: normal; } .order-open-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: linear-gradient(135deg, #4a5aaf, #6672d1); color: white; border: none; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-fast) var(--ease-default); width: auto; max-width: 100%; } .order-open-btn:hover { background: linear-gradient(135deg, #3a4a9f, #5562c1); transform: translateY(-1px); } .order-view-btn { display: inline-flex; align-items: center; padding: 5px 12px; background: none; color: var(--color-text-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 11px; cursor: pointer; transition: all var(--duration-fast) var(--ease-default); white-space: normal; } .order-view-btn:hover { border-color: var(--color-primary); color: var(--color-primary-on-surface); } .order-inline-badge { margin-right: 4px; vertical-align: middle; } .order-canceled-inline { display: block; font-size: var(--font-sm); color: var(--color-error); font-weight: var(--weight-semibold); margin: 4px 0; } .order-copy-btn { display: inline-flex; align-items: center; padding: 5px 10px; background: none; color: var(--color-text-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 11px; cursor: pointer; transition: all var(--duration-fast) var(--ease-default); white-space: normal; } .order-copy-btn:hover { border-color: #ff9800; color: #e65100; }     .preview-overlay { position: fixed; inset: 0;   background: transparent; z-index: var(--z-tooltip); } .preview-panel { position: fixed;     top: var(--topbar-height); left: var(--sidebar-width); right: 0; bottom: 0; background: var(--color-bg-base); border-radius: 0; box-shadow: none; z-index: 701; display: flex; flex-direction: column;   animation: confirm-in var(--duration-normal) var(--ease-default) forwards; } .preview-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .preview-title { flex: 1; font-size: var(--font-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-dl-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-text-tertiary); transition: color var(--duration-fast), background var(--duration-fast); } .preview-dl-btn:hover { background: var(--color-bg-sunken); color: var(--color-primary-on-surface); } .preview-close { width: 28px; height: 28px; border: none; background: var(--color-bg-sunken); border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .preview-close:hover { background: var(--color-border-default); } .preview-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; } .preview-iframe { width: 100%; height: 100%; border: none; } .preview-image { max-width: 100%; max-height: 100%; object-fit: contain; }   .preview-zoom-host { flex: 1; width: 100%; height: 100%; min-height: 0; position: relative; overflow: hidden; background: var(--color-bg-sunken);   touch-action: none; -webkit-user-select: none; user-select: none; } .ap-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .ap-image { display: block; width: 100%; height: auto; } .ap-page { position: relative; background: var(--color-bg-base); margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .ap-page:last-child { margin-bottom: 0; } .ap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .preview-unsupported { text-align: center; color: var(--color-text-tertiary); padding: 40px; } .preview-unsupported p { margin: 12px 0 20px; font-size: var(--font-sm); } @media (max-width: 1280px) {   .preview-panel { left: 0; } } @media (max-width: 900px) {   .preview-panel { top: var(--topbar-height); left: 0; right: 0; bottom: 0; width: auto; height: auto; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }   .order-dialog-overlay { position: fixed; inset: 0; background: var(--color-overlay-black-15); z-index: var(--z-notification); } .order-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-bg-base); border-radius: var(--radius-lg); box-shadow: 0 16px 48px var(--color-overlay-black-15); width: min(800px, 92vw); max-height: min(760px, 90vh); display: flex; flex-direction: column; overflow: hidden; z-index: 601; animation: cabinet-dialog-open var(--duration-normal) var(--ease-default) forwards; } .order-dialog-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-md); font-weight: var(--weight-bold); flex-shrink: 0; } .order-dialog-close { margin-left: auto; width: 26px; height: 26px; border: none; background: var(--color-overlay-white-22); color: var(--color-text-on-primary); border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-default); } .order-dialog-close:hover { background: var(--color-overlay-white-40); } .order-dialog-loading { padding: 40px; text-align: center; }   .order-subheader { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--color-primary-surface-light); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .order-subheader-icon { display: inline-flex; color: var(--color-feature-tracking); } .order-subheader-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-viewmode-chip { margin-left: auto; background: var(--color-bg-sunken); border-radius: 11px; padding: 3px 10px; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); }   .order-dialog-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .order-section { margin-bottom: 16px; } .order-section:last-child { margin-bottom: 4px; } .order-section-label { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-tertiary); margin-bottom: 6px; } .order-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 12px 14px; } .order-value-text { font-size: var(--font-sm); color: var(--color-text-primary); overflow-wrap: anywhere; } .order-value-text.muted { color: var(--color-text-tertiary); } .order-value-text.strong { font-weight: var(--weight-medium); } .order-value-text.pre { white-space: pre-wrap; }   .order-receiver-card { display: flex; align-items: flex-start; gap: 12px; } .order-receiver-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-md); font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .order-receiver-info { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 36px; } .order-receiver-name { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .order-receiver-detail { font-size: var(--font-xs); color: var(--color-text-tertiary); overflow-wrap: anywhere; } .order-receiver-detail:empty { display: none; }   .order-att-list, .order-doc-list { list-style: none; margin: 0; } .order-att-list { padding: 4px 6px; } .order-att-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin: 1px 0; border-radius: 6px; } .order-att-row:hover { background: var(--color-bg-sunken); } .order-att-open { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--color-text-secondary); padding: 0; } .order-att-name { font-size: var(--font-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-att-download { display: inline-flex; border: none; background: transparent; border-radius: 5px; padding: 4px; cursor: pointer; color: var(--color-text-secondary); } .order-att-download:hover { background: var(--color-bg-sunken); }   .order-doc-list { padding: 8px 10px; } .order-doc-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; } .order-doc-sort { min-width: 16px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .order-doc-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-doc-kind, .order-doc-count { font-size: var(--font-xs); color: var(--color-text-secondary); } .order-doc-unit { margin-left: -8px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .order-option-chips { display: flex; flex-wrap: wrap; margin-top: 8px; } .order-option-chip { background: var(--color-primary-surface); border-radius: 10px; padding: 3px 9px; margin: 0 6px 4px 0; font-size: 11px; font-weight: var(--weight-medium); color: var(--color-primary-on-surface); }   .order-comment-card { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .order-comment-input { border: none; background: transparent; font: inherit; font-size: var(--font-sm); color: var(--color-text-primary); resize: vertical; padding: 2px 0; } .order-comment-input:focus { outline: none; } .order-comment-input::placeholder { color: var(--color-text-tertiary); }   .order-expire { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); } .order-expire-text { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .order-dialog-footer { display: flex; justify-content: flex-end; padding: 12px 20px; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); flex-shrink: 0; } .order-primary-btn { background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 6px; padding: 8px 20px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .order-primary-btn:hover:not(:disabled) { opacity: 0.9; } .order-primary-btn:active:not(:disabled) { opacity: 0.8; } .order-primary-btn:disabled { opacity: 0.45; cursor: default; }   .order-busy-overlay { position: absolute; inset: 0; background: var(--color-overlay-black-70); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; } .order-busy-text { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); text-align: center; }           .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }   .order-invoice-row { display: flex; align-items: center; gap: 6px; } .order-invoice-row .order-value-text { flex: 1; } .order-invoice-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: none; border-radius: 5px; cursor: pointer; background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-medium); } .order-invoice-btn:hover { background: var(--color-primary-surface-light, var(--color-primary-surface)); } .order-invoice-btn:disabled, .order-invoice-btn.disabled { opacity: .45; cursor: default; } .order-invoice-upload { position: relative; overflow: hidden; } .order-invoice-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .order-invoice-upload.disabled input[type=file] { pointer-events: none; }   .order-dialog.order-dialog-embedded { position: static; transform: none;   animation: none; width: auto; max-width: none; max-height: none; height: auto; border-radius: 0; border: none; box-shadow: none; background: transparent; overflow: visible; z-index: auto; } .order-dialog.order-dialog-embedded .order-dialog-body { padding: 0; max-height: none; overflow: visible; } .order-dialog.order-dialog-embedded .order-subheader, .order-dialog.order-dialog-embedded .order-dialog-footer { padding-left: 0; padding-right: 0; background: transparent; border: none; } 
/*css/screens/13-features.css*/
  .feature-page { padding: 20px 24px; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .feature-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .feature-header h2 { font-size: 20px; font-weight: var(--weight-bold); margin: 0; color: var(--color-text-primary); letter-spacing: -0.3px; } .header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .feature-empty { padding: 40px; text-align: center; color: var(--color-text-disabled); font-size: 14px; } .feature-table-wrap { overflow: auto; flex: 1; } .feature-table { width: 100%; border-collapse: collapse; font-size: 13px; } .feature-table th { background: var(--color-bg-sunken); padding: 8px 10px; text-align: left; font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-border-default); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .feature-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border-default); } .feature-table tbody tr:hover { background: rgba(0,128,0,0.04); }     .btn-sm { padding: 3px 8px; font-size: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: white; cursor: pointer; } .btn-sm:hover { background: var(--color-bg-sunken); } .btn-danger { padding: 6px 14px; background: var(--color-error); color: white; border: none; border-radius: var(--radius-full); font-size: 13px; cursor: pointer; } .btn-danger:hover { background: #b71c1c; } .btn-sm.btn-danger { background: white; color: var(--color-error); border-color: var(--color-error); padding: 3px 8px; }   .status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: var(--weight-semibold); } .status-0 { background: var(--color-border-default); color: var(--color-text-secondary); } .status-1 { background: #c8e6c9; color: #2e7d32; } .status-2 { background: var(--color-warning-surface); color: #e65100; } .status-3 { background: var(--color-success-surface); color: var(--color-success-dark); } .status-4 { background: var(--color-success-surface); color: var(--color-success-dark); }   .status-5 { background: var(--color-info-surface); color: var(--color-info); } .status-canceled { background: var(--color-error-surface); color: var(--color-error); } .btn-close-detail { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-text-disabled); } .detail-row { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; } .detail-label { font-weight: var(--weight-semibold); color: var(--color-text-disabled); min-width: 80px; flex-shrink: 0; } .detail-sub-row { padding: 2px 0 2px 88px; font-size: 13px; color: var(--color-text-secondary); } .detail-actions { display: flex; gap: 8px; margin-top: 12px; }   .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-dropdown); } .modal-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 480px; max-height: 80vh; background: white; border-radius: var(--radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.2); z-index: 201; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border-default); } .modal-header h3 { margin: 0; font-size: 16px; } .modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--color-border-default); display: flex; gap: 8px; justify-content: flex-end; }   .form-group { margin-bottom: 12px; } .form-group label { display: block; font-size: 12px; font-weight: var(--weight-semibold); margin-bottom: 4px; color: var(--color-text-secondary); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 13px; box-sizing: border-box; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); }   .dt-split { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .form-group .dt-split { display: flex; width: 100%; } .dt-split .dt-split-date { flex: 1 1 auto; min-width: 0; } .form-group .dt-split input, .form-group .dt-split select { width: auto; } .form-group .dt-split .dt-split-date { flex: 1 1 140px; } .dt-split .dt-split-time { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; } .dt-split .dt-split-sep { color: var(--color-text-tertiary); } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .tracking-layout { display: flex; gap: 12px; flex: 1; overflow: hidden; } .tracking-list { width: 320px; flex-shrink: 0; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .tracking-detail { flex: 1; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 16px; } .tracking-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; } .tracking-item:hover { background: rgba(0,128,0,0.04); } .tracking-item.selected { background: var(--color-primary-surface); } .tracking-item-name { font-size: 13px; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .genre-発信 { background: var(--color-info-surface); color: var(--color-info); } .genre-受信 { background: var(--color-success-surface); color: #2e7d32; } .genre-フォールバック { background: var(--color-warning-surface); color: #e65100; } .genre-チェック { background: #fce4ec; color: var(--color-error); } .genre-その他 { background: var(--color-border-default); color: var(--color-text-secondary); }   .tracking-events { position: relative; padding-left: 24px; } .tracking-event { display: flex; gap: 12px; margin-bottom: 16px; position: relative; } .event-time { font-size: 11px; color: var(--color-text-disabled); min-width: 70px; text-align: right; flex-shrink: 0; } .event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 3px; } .event-content { flex: 1; } .event-status { font-size: 13px; font-weight: var(--weight-semibold); } .event-from{ font-size: 11px; color: var(--color-text-disabled); } .tracking-detail-header h3 { margin: 0 0 12px; font-size: 15px; } .text-muted { color: var(--color-text-disabled); font-size: 13px; } @keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }   .tr-selected { background: rgba(34, 187, 128, 0.06); } .summary-cards { display: flex; gap: 12px; margin-bottom: 16px; } .summary-card { flex: 1; background: var(--color-bg-sunken); border-radius: var(--radius-lg); padding: 16px; text-align: center; } .summary-value { font-size: 28px; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .summary-label { font-size: 12px; color: var(--color-text-disabled); margin-top: 4px; } .bar-row { display: flex; align-items: center; gap: 10px; } .bar-track { flex: 1; height: 20px; background: var(--color-bg-sunken); border-radius: var(--radius-sm); overflow: hidden; } .bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-sm); min-width: 2px; transition: width var(--duration-slow) ease; }   .ratio-bar { display: inline-block; width: 60px; height: 6px; background: var(--color-bg-sunken); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; } .ratio-fill { height: 100%; background: var(--color-primary); border-radius: 3px; }   .approval-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: var(--weight-semibold); }   .edit-error { padding: 8px 12px; background: var(--color-error-surface); color: var(--color-error); border-radius: var(--radius-md); font-size: 12px; margin-bottom: 12px; border: 1px solid var(--color-error-surface); } .edit-warning { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--color-warning-surface); color: #f57f17; border-radius: var(--radius-md); font-size: 12px; margin-top: 8px; border: 1px solid #ffecb3; } .template-select { flex: 1; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: 12px; background: var(--color-bg-sunken); color: var(--color-text-secondary); } .inline-select { width: 100%; min-width: 60px; padding: 4px 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: 12px; }   .schedule-timeline { display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; }   .undo-bar { position: fixed; bottom: 16px; right: 16px; z-index: var(--z-sticky); } .undo-bar button { background: var(--color-primary); color: var(--color-bg-base); border: none; border-radius: var(--radius-md); padding: 8px 16px; font-size: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .undo-bar button:hover { opacity: 0.9; }         .todo-stats-header { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%); color: white; margin-bottom: 12px; } .todo-stats-left h2 { margin: 0; font-size: 18px; font-weight: var(--weight-bold); color: white; } .todo-stats-row { display: flex; gap: 24px; flex: 1; justify-content: center; } .todo-stats-item { text-align: center; } .todo-stats-num { display: block; font-size: 22px; font-weight: var(--weight-bold); line-height: 1.1; } .todo-stats-lbl { font-size: 10px; opacity: 0.75; } .todo-stats-item.has-overdue .todo-stats-num { color: #fca5a5; }   .todo-sidebyside-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; padding: 7px 14px; border: 1px solid var(--color-overlay-white-40); border-radius: 8px; background: transparent; color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: var(--weight-medium); cursor: pointer; } .todo-sidebyside-btn svg { width: 14px; height: 14px; } .todo-sidebyside-btn:hover { background: var(--color-overlay-white-22); }   .todo-sidebyside-btn:active { background: var(--color-overlay-white-30); } .todo-create-btn { display: flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 20px; background: rgba(255,255,255,0.15); color: white; font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-fast); flex-shrink: 0; } .todo-create-btn:hover { background: rgba(255,255,255,0.3); border-color: white; } .todo-create-btn svg { width: 16px; height: 16px; }   .todo-chip-bar { display: flex; align-items: center; gap: 6px; padding: 0 0 12px; flex-wrap: wrap; } .todo-chip { padding: 5px 14px; font-size: 12px; border: 1px solid var(--color-border-default); border-radius: 16px; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--duration-fast); font-weight: var(--weight-medium); } .todo-chip:hover { background: var(--color-bg-sunken); } .todo-chip.active { background: rgba(8,145,178,0.08); border-color: #0891B2; color: #0891B2; font-weight: var(--weight-semibold); } .todo-search-inline { margin-left: auto; display: flex; align-items: center; gap: 4px; position: relative; } .todo-search-inline input { padding: 5px 10px 5px 28px; border: 1px solid var(--color-border-default); border-radius: 16px; font-size: 12px; width: 160px; transition: width var(--duration-normal), border-color var(--duration-fast); } .todo-search-inline input:focus { width: 220px; border-color: #0891B2; outline: none; } .todo-search-icon { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--color-text-tertiary); pointer-events: none; }   .todo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--color-text-tertiary); } .todo-empty svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; } .todo-empty-title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .todo-empty-sub { font-size: 13px; margin-top: 4px; }   .todo-layout { display: flex; gap: 16px; min-height: 300px; } .todo-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }   .todo-card { display: flex; border: 1px solid var(--color-border-default); border-radius: 8px; cursor: pointer; transition: all var(--duration-fast) ease; overflow: hidden; background: var(--color-bg-base); } .todo-card:hover { border-color: #0891B2; } .todo-card.selected { border-color: #0891B2; background: rgba(8,145,178,0.04); } .todo-card.completed { opacity: 0.55; }   .todo-prio-bar { width: 4px; flex-shrink: 0; border-radius: 8px 0 0 8px; } .prio-0 { background: #10B981; } .prio-1 { background: #F59E0B; } .prio-2 { background: #EF4444; } .todo-card-body { padding: 8px 12px; min-width: 0; flex: 1; } .todo-card-title { font-size: 13px; font-weight: var(--weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .todo-card-info { display: flex; align-items: center; gap: 0; margin-top: 5px; font-size: 11px; color: var(--color-text-tertiary); } .todo-card-info > span { display: flex; align-items: center; gap: 3px; white-space: nowrap; } .todo-card-info svg { width: 12px; height: 12px; flex-shrink: 0; } .todo-info-sep { width: 1px; height: 10px; background: var(--color-border-default); margin: 0 8px; flex-shrink: 0; }   .todo-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-0 { background: #9CA3AF; } .dot-1 { background: #2563EB; } .dot-2 { background: #059669; } .dot-3 { background: #D97706; } .todo-deadline.overdue { color: var(--color-error); font-weight: var(--weight-semibold); } .todo-deadline.overdue svg { stroke: var(--color-error); }   .todo-detail-panel { width: 380px; min-width: 320px; flex-shrink: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow-y: auto; max-height: calc(100vh - 260px); background: var(--color-bg-base); } .todo-detail-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); gap: 8px; } .todo-detail-head h3 { flex: 1; margin: 0; font-size: 15px; font-weight: var(--weight-semibold); } .todo-detail-head-actions { display: flex; gap: 4px; align-items: center; } .todo-detail-body { padding: 14px 16px; }   .todo-progress-btns { display: flex; gap: 4px; margin-bottom: 14px; } .btn-progress { padding: 4px 10px; font-size: 11px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; transition: all var(--duration-fast); } .btn-progress.active { background: #0891B2; color: white; border-color: #0891B2; } .btn-progress:hover { background: var(--color-bg-sunken); } .btn-progress.active:hover { background: #0E7490; }   .todo-detail-grid { display: flex; flex-direction: column; gap: 8px; } .todo-detail-grid .detail-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .todo-detail-grid .detail-label { width: 60px; flex-shrink: 0; font-size: 12px; color: var(--color-text-tertiary); }   .todo-prio-badge { font-size: 11px; font-weight: var(--weight-semibold); padding: 1px 8px; border-radius: 10px; } .todo-prio-badge.prio-0 { background: #d1fae5; color: #065f46; } .todo-prio-badge.prio-1 { background: #fef3c7; color: #92400e; } .todo-prio-badge.prio-2 { background: #fee2e2; color: #991b1b; } .overdue { color: #EF4444; font-weight: var(--weight-semibold); }   .todo-body-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-default); } .todo-body { font-size: 13px; color: var(--color-text-primary); white-space: pre-wrap; }   .todo-rank-display { display: flex; gap: 1px; } .rank-star { font-size: 14px; color: var(--color-border-default); cursor: default; line-height: 1; } .rank-star.filled { color: #ffc107; } .btn-rank-star { padding: 3px 8px; white-space: nowrap;   font-size: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; color: var(--color-text-disabled); } .btn-rank-star.active { background: #fff8e1; border-color: #ffc107; color: #f57f17; font-weight: var(--weight-semibold); } .btn-rank-star:hover { background: #fffde7; }     .todo-timeline-filter { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--color-border-default); border-radius: 6px; overflow: hidden; } .todo-timeline-seg { padding: 3px 10px; border: none; background: transparent; font-size: var(--font-xs); color: var(--color-text-secondary); cursor: pointer; } .todo-timeline-seg.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .todo-timeline-event { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-timeline-event.is-notice { background: var(--color-bg-sunken); } .todo-timeline-event-text { flex: 1; white-space: pre-wrap; } .todo-timeline-event-time { color: var(--color-text-disabled); flex: 0 0 auto; } .todo-remarks-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-default); } .todo-remarks-section h4 { margin: 0 0 8px; font-size: 13px; } .todo-remark { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 6px; } .remark-header { font-size: 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .remark-header strong { flex: 1; } .btn-remark-delete { border: none; background: none; color: var(--color-text-disabled); font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; } .btn-remark-delete:hover { color: var(--color-error); } .remark-body { font-size: 13px; white-space: pre-wrap; }   .remark-body.is-editable { cursor: pointer; border-radius: 4px; } .remark-body.is-editable:hover { background: var(--color-bg-sunken); } .remark-input { display: flex; gap: 8px; margin-top: 8px; } .remark-input textarea { flex: 1; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 13px; resize: vertical; } .remark-input .btn-primary { align-self: flex-end; }   .todo-detail-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-default); display: flex; justify-content: flex-end; }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .todo-stats-header { flex-wrap: wrap; gap: 10px; padding: 12px 14px; } .todo-stats-row { gap: 16px; } .todo-layout { flex-direction: column; } .todo-detail-panel { width: 100%; min-width: 0; max-height: none; } .todo-search-inline input { width: 120px; } .todo-search-inline input:focus { width: 160px; } }   html.dark .todo-card { background: var(--color-bg-elevated); } html.dark .todo-detail-panel { background: var(--color-bg-elevated); } html.dark .btn-progress { background: var(--color-bg-elevated); } html.dark .btn-rank-star { background: var(--color-bg-elevated); } html.dark .btn-rank-star.active { background: rgba(255,193,7,0.15); } html.dark .todo-prio-badge.prio-0 { background: rgba(16,185,129,0.15); color: #6ee7b7; } html.dark .todo-prio-badge.prio-1 { background: rgba(245,158,11,0.15); color: #fcd34d; } html.dark .todo-prio-badge.prio-2 { background: rgba(239,68,68,0.15); color: #fca5a5; }     .contact-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .contact-search { flex: 1; } .contact-search input { width: 100%; padding: 7px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 13px; } .contact-search input:focus { border-color: var(--color-primary); outline: none; }   .contact-search { position: relative; } .contact-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 0 4px; font-size: var(--font-base); line-height: 1; color: var(--color-text-secondary); } .panel-search-input-wrap .contact-search-clear { right: 8px; }   .contact-stats { display: flex; gap: 12px; margin-bottom: 12px; } .contact-stat { font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .contact-stat.muted { color: var(--color-text-disabled); font-weight: var(--weight-normal); }   .contact-add-btn { display: inline-flex; align-items: center; gap: 4px; }   .contact-unorganized { margin: 0 0 8px; border-radius: 8px; background: var(--color-bg-sunken); } .contact-unorganized-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; } .contact-unorganized-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .contact-unorganized-count { padding: 1px 6px; border-radius: 9px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); } .contact-unorganized-sub { flex: 1 1 auto; min-width: 0; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .contact-unorganized-chevron { font-size: var(--font-xs); color: var(--color-text-secondary); } .contact-unorganized-list { max-height: 220px; margin: 0; padding: 0 4px 6px; overflow-y: auto; list-style: none; } .contact-unorganized-item { display: flex; align-items: center; gap: 6px; margin: 1px 0; padding: 6px 8px; border-radius: 6px; background: var(--color-bg-base); } .contact-unorganized-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .contact-unorganized-name, .contact-unorganized-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact-unorganized-name { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .contact-unorganized-email { font-size: var(--font-2xs); color: var(--color-text-secondary); } .contact-unorganized-register { padding: 4px 12px; border: none; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); cursor: pointer; } .contact-unorganized-dismiss { padding: 4px 10px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .contact-unorganized-empty { margin: 2px 10px 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .contact-card { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 16px 12px; text-align: center; cursor: pointer; transition: all var(--duration-fast) var(--ease-default); } .contact-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .contact-card.selected { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .contact-card.retired { opacity: 0.5; } .contact-avatar-img { width: 56px; height: 56px; border-radius: var(--radius-avatar); object-fit: cover; } .contact-avatar-initial { width: 56px; height: 56px; border-radius: var(--radius-avatar); background: var(--color-primary); color: white; font-size: 22px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; }     .contact-list-view { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0;   overflow-y: auto; } .contact-list-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--ease-default); } .contact-list-item:hover { border-color: var(--color-primary); } .contact-list-item.selected { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .contact-list-item.retired { opacity: 0.5; } .contact-list-avatar { flex-shrink: 0; } .contact-avatar-img-sm { width: 36px; height: 36px; border-radius: var(--radius-avatar); object-fit: cover; } .contact-avatar-initial-sm { width: 36px; height: 36px; border-radius: var(--radius-avatar); background: var(--color-primary); color: white; font-size: 15px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; } .contact-list-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .contact-list-name { font-size: 14px; font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 6px; } .contact-list-email { font-size: 11px; color: var(--color-text-tertiary); } .contact-list-voice { font-size: 11px; color: var(--color-text-disabled); font-style: italic; flex-shrink: 0; }   .contact-admin-tag { font-size: 10px; background: transparent; color: var(--color-branch-purple); padding: 1px 6px; border-radius: 8px; font-weight: var(--weight-semibold); } .contact-canceled-tag { font-size: 10px; background: var(--color-error-surface); color: var(--color-error); padding: 1px 6px; border-radius: 8px; font-weight: var(--weight-semibold); }   .contact-detail-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; max-width: 90vw; max-height: 85vh; background: var(--color-bg-base); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: 1001; overflow-y: auto; } .contact-detail-header { display: flex; align-items: center; gap: 14px; padding: 20px 20px 12px; border-bottom: 1px solid var(--color-border-default); } .contact-detail-avatar { flex-shrink: 0; } .contact-detail-avatar-img { width: 64px; height: 64px; border-radius: var(--radius-avatar); object-fit: cover; } .contact-detail-avatar-initial { width: 64px; height: 64px; border-radius: var(--radius-avatar); background: var(--color-primary); color: white; font-size: 26px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; } .contact-detail-title { flex: 1; min-width: 0; } .contact-detail-title h3 { margin: 0; font-size: 18px; } .contact-detail-knownAs { font-size: 13px; color: var(--color-text-tertiary); } .contact-detail-badges { display: flex; gap: 4px; margin-top: 4px; } .contact-detail-body { padding: 16px 20px 20px; } .contact-detail-voice { font-size: 13px; color: var(--color-text-secondary); font-style: italic; margin-bottom: 12px; padding: 8px 12px; background: var(--color-bg-sunken); border-radius: var(--radius-md); }   .btn-sm.contact-show-conversation { display: block; margin: 0 auto 12px; padding: 4px 12px; font-size: var(--font-sm); background: var(--color-primary-surface); color: var(--color-primary-on-surface); border-color: var(--color-border-default); } .contact-detail-section { margin-bottom: 16px; } .contact-detail-section h4 { font-size: 13px; color: var(--color-text-tertiary); margin: 0 0 8px; font-weight: var(--weight-semibold); } .contact-detail-email { color: var(--color-primary-on-surface); font-weight: var(--weight-medium); } .contact-detail-actions { margin-top: 16px; display: flex; gap: 8px; }   .edit-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .edit-section-header h4 { margin: 0; } .edit-value-input { flex: 1; padding: 4px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-sm); } .btn-add { background: var(--color-info); color: var(--color-bg-base); border: none; border-radius: var(--radius-sm); padding: 2px 10px; cursor: pointer; font-size: var(--font-sm); } .btn-add:hover { opacity: 0.85; } .btn-remove { background: none; border: 1px solid var(--color-text-secondary); border-radius: var(--radius-full); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-secondary); font-size: 14px; flex-shrink: 0; } .btn-remove:hover { border-color: #c00; color: #c00; } .candidate-list { max-height: 160px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); } .candidate-item { padding: 6px 10px; cursor: pointer; font-size: var(--font-sm); border-bottom: 1px solid var(--color-border-default); } .candidate-item:last-child { border-bottom: none; } .candidate-item:hover { background: var(--color-bg-sunken); } .contact-validation-errors { margin-top: 8px; padding: 8px 12px; background: var(--color-error-surface); border: 1px solid #e53e3e; border-radius: var(--radius-sm); } .validation-error-item { color: #c53030; font-size: var(--font-sm); line-height: 1.6; }   .phone-call-panel { padding: 20px; background: var(--color-bg-base); } .phone-call-head { display: flex; align-items: center; gap: 10px; } .phone-call-head .icon, .phone-call-head svg { color: var(--color-feature-phone); } .phone-call-title { font-weight: 600; font-size: var(--font-lg); color: var(--color-text-primary); } .phone-call-subtitle { margin: 8px 0 0; color: var(--color-text-secondary); font-size: var(--font-md); } .phone-call-sep { margin: 16px 0; border: 0; border-top: 1px solid var(--color-border-default); } .phone-call-hint { margin: 0; color: var(--color-text-secondary); font-size: var(--font-sm); } 
/*css/screens/14-shipping.css*/
  .shipping-create { display: flex; flex-direction: column; height: 100vh; background: var(--color-bg-sunken); position: relative; }   .ship-intro-dim { position: absolute; inset: 0; z-index: 40; background: rgba(35,45,40,.42); } .ship-intro { position: absolute; z-index: 41; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; max-width: calc(100% - 32px); background: var(--color-bg-base, #fff); border-radius: 24px; box-shadow: 0 30px 70px rgba(20,30,50,.35); padding: 30px 30px 28px; text-align: center; } .ship-intro-ic { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;   background: linear-gradient(135deg, var(--color-feature-tracking) 0%, var(--color-primary) 100%); } .ship-intro-ic svg { width: 38px; height: 38px; } .ship-intro-title { font-size: 25px; font-weight: 800; margin: 0 0 8px; color: var(--color-text-primary); } .ship-intro-sub { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 24px; } .ship-intro-step { display: flex; align-items: flex-start; gap: 15px; text-align: left; margin-bottom: 18px; } .ship-intro-num { width: 38px; height: 38px; border-radius: 50%; flex: none; color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center;   background: var(--color-feature-tracking); } .ship-intro-step h3 { font-size: 16px; font-weight: 800; margin: 5px 0 2px; color: var(--color-text-primary); } .ship-intro-step p { font-size: 12.5px; color: var(--color-text-secondary); margin: 0; } .ship-intro-btn { width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 13px; color: #fff; font-size: 16px; font-weight: 800;   cursor: pointer; background: linear-gradient(135deg, var(--color-feature-tracking), var(--color-feature-tracking-dark)); }   .ship-intro-btn:hover { background: var(--color-feature-tracking-dark); }   .scr-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; background: var(--color-bg-base); flex: none; } .scr-head h1 { font-size: 20px; font-weight: 800; margin: 0 0 3px; color: var(--color-text-primary); } .scr-head p { font-size: 12.5px; color: var(--color-text-secondary); margin: 0; } .scr-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #2B333B; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .scr-close svg { width: 16px; height: 16px; } .scr-body { flex: 1; overflow-y: auto; padding: 4px 18px 12px; background: var(--color-bg-sunken); } .scr-sec { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 14px; padding: 16px 16px 18px; margin-bottom: 14px; } .scr-sec-head { display: flex; align-items: flex-start; gap: 12px; } .scr-ic { width: 26px; height: 26px; color: var(--color-text-secondary); flex: none; margin-top: 1px; } .scr-ic svg { width: 26px; height: 26px; } .scr-t { flex: 1; min-width: 0; } .scr-t h2 { font-size: 16px; font-weight: 800; margin: 0 0 2px; color: var(--color-text-primary); } .scr-t p { font-size: 12px; color: var(--color-text-secondary); margin: 0; } .scr-badge { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px; flex: none; } .scr-badge.unset { color: var(--color-warning); background: var(--color-warning-surface); } .scr-badge.set { color: var(--color-success-dark, var(--color-success)); background: var(--color-success-surface); } .scr-badge.opt { color: var(--color-text-tertiary); background: var(--color-bg-sunken); } .scr-theme-selected { display: flex; align-items: center; gap: 12px; margin-top: 14px; height: 56px; border: 1.5px solid var(--color-primary); border-radius: 12px; padding: 0 14px; background: var(--color-primary-surface-light, #F4FBF7); } .scr-theme-name { flex: 1; font-weight: 700; color: var(--color-text-primary); } .scr-avatar { width: 34px; height: 34px; border-radius: var(--radius-avatar); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #1AA46E)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; } .scr-avatar.sm { width: 28px; height: 28px; font-size: 12px; } .scr-change { color: var(--color-primary-dark, #1AA46E); font-weight: 700; font-size: 15px; cursor: pointer; border: 0; background: none; }   .scr-link { display: inline-block; margin-top: 12px; color: var(--color-primary-dark, #1AA46E); font-size: 13px; font-weight: 600; cursor: pointer; } .scr-dropdown { margin-top: 12px; border: 1px solid var(--color-border-default); border-radius: 10px; overflow: hidden; } .scr-search { width: 100%; height: 42px; border: 0; border-bottom: 1px solid var(--color-border-default); padding: 0 14px; font-size: 14px; outline: none; background: var(--color-bg-base); color: var(--color-text-primary); } .scr-dd-list { max-height: 220px; overflow-y: auto; } .scr-dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; } .scr-dd-item:hover { background: var(--color-primary-surface); } .scr-fld-label { font-size: 12px; color: var(--color-text-secondary); margin: 14px 0 7px; } .scr-select { width: 100%; height: 52px; border: 1.5px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); padding: 0 14px; font-size: 15px; color: var(--color-text-primary); } .scr-row-between { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .scr-sub { font-size: 13px; color: var(--color-text-secondary); } .scr-add { color: var(--color-primary-dark, #1AA46E); font-weight: 700; font-size: 14px; cursor: pointer; } .scr-ph { text-align: center; color: var(--color-text-tertiary); font-size: 13px; padding: 16px 0 4px; } .scr-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 14px; border: 2px dashed var(--color-border-muted, #CDD3DA); border-radius: 14px; background: var(--color-bg-sunken); padding: 30px 16px; text-align: center; cursor: pointer; } .scr-drop svg { width: 34px; height: 34px; color: var(--color-text-tertiary); margin-bottom: 10px; } .scr-drop-b { font-size: 15px; font-weight: 800; color: var(--color-text-primary); } .scr-drop-s { font-size: 12.5px; color: var(--color-text-tertiary); margin-top: 4px; }   .scr-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .scr-drop:focus-within, .scr-drop:hover { border-color: var(--color-primary); }   .scr-theme-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .scr-theme-chip { max-width: 180px; padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 999px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .scr-theme-chip:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); }   .scr-deadline-row { display: flex; align-items: center; gap: 8px; } .scr-deadline-row input { flex: 1; min-width: 0; } .scr-deadline-countdown { flex-shrink: 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .scr-deadline-countdown.over { color: var(--color-error); font-weight: var(--weight-medium); }   .ship-manual-doc { margin: 8px 0; padding: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .scr-manual-doc-grid { display: grid; grid-template-columns: 1fr 90px 64px 64px; gap: 8px; margin-top: 8px; } .scr-manual-doc-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .scr-manual-doc-field input { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-sm); } .scr-manual-doc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } @media (max-width: 480px) { .scr-manual-doc-grid { grid-template-columns: 1fr 1fr 1fr; } .scr-manual-doc-field.wide { grid-column: 1 / -1; } }   .scr-new-contact { max-height: 70vh; overflow-y: auto; } .scr-new-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .scr-new-contact-error { margin-top: 6px; color: var(--color-error); font-size: var(--font-sm); white-space: pre-wrap; } .scr-opt-head { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; cursor: pointer; padding: 0; text-align: left; } .scr-chev { width: 18px; height: 18px; color: var(--color-text-tertiary); flex: none; transition: transform .15s; } .scr-chev.open { transform: rotate(90deg); } .scr-opt-body { margin-top: 14px; } .scr-foot { border-top: 1px solid var(--color-border-default); padding: 12px 18px 16px; background: var(--color-bg-base); flex: none; } .scr-status { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 12px; } .scr-status span { font-size: 13px; color: var(--color-text-tertiary); } .scr-status span.ok { color: var(--color-success-dark, var(--color-success)); font-weight: 700; } .scr-cta { width: 100%; height: 56px; border: 0; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #1AA46E)); box-shadow: 0 10px 24px rgba(34,187,128,.28); }   @keyframes sp-spin { to { transform: rotate(360deg); } } .sp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3.5px solid var(--color-border-default); border-top-color: var(--color-primary); animation: sp-spin .8s linear infinite; } .sp-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 0 36px; } .sp-load p { margin: 0; font-size: 13.5px; color: var(--color-text-secondary); } .sp-spinner-sm { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: sp-spin .8s linear infinite; display: inline-block; vertical-align: -3px; } @media (prefers-reduced-motion: reduce) { .sp-spinner, .sp-spinner-sm { animation-duration: 1.6s; } } .shipping-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); } .shipping-header-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .shipping-layout { display: flex; flex: 1; overflow: hidden; } .shipping-form { flex: 1; overflow-y: auto; padding: 16px 20px 80px 20px; }   .shipping-radio-group { display: flex; gap: 8px; margin-bottom: 8px; } .shipping-radio { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border-default); border-radius: 6px; cursor: pointer; font-size: var(--font-base); transition: all var(--duration-fast); } .shipping-radio:hover { border-color: var(--color-primary); } .shipping-radio.active { border-color: var(--color-primary); background: var(--color-primary-surface-light); color: var(--color-primary-dark); } .shipping-radio input[type="radio"] { accent-color: var(--color-primary); }   .shipping-field { margin-bottom: 8px; } .shipping-field label { display: block; font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: 4px; font-weight: var(--weight-medium); } .shipping-field input, .shipping-field select, .shipping-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; font-size: var(--font-base); background: var(--color-bg-base); transition: border-color var(--duration-fast); } .shipping-field input:focus, .shipping-field select:focus, .shipping-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(34, 187, 128, 0.15); }   .shipping-receiver-list { margin-bottom: 8px; } .shipping-receiver-card { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 6px; margin-bottom: 6px; } .receiver-info { flex: 1; } .receiver-name { font-weight: var(--weight-semibold); font-size: var(--font-md); } .receiver-address { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: 2px; }   .receiver-address-warning { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10px; color: var(--color-warning); } .receiver-address-warning-mark { width: 14px; height: 14px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-warning); color: var(--color-text-on-primary); font-size: 10px; font-weight: 700; } .shipping-receiver-form { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 6px; padding: 12px; margin-top: 8px; }   .shipping-doc-list { margin-bottom: 8px; } .shipping-doc-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 6px; margin-bottom: 4px; } .doc-sort { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--weight-semibold); flex-shrink: 0; } .doc-title { flex: 1; font-size: var(--font-base); } .doc-meta { font-size: var(--font-sm); color: var(--color-text-tertiary); } .shipping-checkbox-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .shipping-checkbox-group label { display: flex; align-items: center; gap: 6px; font-size: var(--font-base); cursor: pointer; } .shipping-checkbox-group input[type="checkbox"] { accent-color: var(--color-primary); }   .com-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 560px; max-width: calc(100vw - 32px); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-base); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: var(--z-modal); } .com-head { height: 40px; display: flex; align-items: flex-end; padding: 0 20px 4px; background: var(--color-primary-surface); font-size: var(--font-xl); color: var(--color-text-primary); } .com-project { height: 30px; display: flex; align-items: flex-end; padding: 0 20px; background: var(--color-primary-surface); } .com-project-title { width: 100%; border: 0; background: transparent; font-size: var(--font-base); color: var(--color-text-primary); } .com-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } .com-top { padding: 5px 30px; } .com-recipients { display: flex; flex-direction: column; gap: 4px; } .com-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .com-pills { display: flex; flex-wrap: wrap; gap: 4px; } .com-pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: var(--radius-lg); background: var(--color-primary-surface); } .com-pill-name { border: 0; background: transparent; font-size: var(--font-sm); color: var(--color-primary-on-surface); cursor: pointer; padding: 0; } .com-pill-remove { border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: inline-flex; padding: 2px; } .com-mention-input { border: 0; background: transparent; font-size: var(--font-md); color: var(--color-text-primary); min-width: 80px; opacity: .7; } .com-mention-input-cc { background: var(--color-bg-sunken); opacity: 1; } .com-cc-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .com-attachments { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; } .com-attachment { display: flex; align-items: center; gap: 10px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .com-summary { margin-top: 8px; padding: 8px 10px; background: var(--color-primary-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .com-summary-row { display: flex; gap: 2px; font-size: var(--font-xs); color: var(--color-text-secondary); margin-bottom: 2px; } .com-summary-label { font-weight: var(--weight-semibold); } .com-summary-list { display: flex; flex-direction: column; margin: 0 0 4px 16px; } .com-summary-item { display: flex; align-items: center; gap: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); padding: 1px 0; } .com-summary-doc { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .com-summary-sheets { color: var(--color-text-tertiary); margin-left: 4px; } .com-mid { padding: 5px 30px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .com-preview-btn { height: 21px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); cursor: pointer; } .com-preview-btn:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .com-viewer { width: 100%; height: 360px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-sunken); } .com-viewer-efax { height: 100%; min-height: 420px; } .com-efax { flex: 1; padding: 5px 24px; display: flex; } .com-body-card { align-self: stretch; padding: 10px 12px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .com-body-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); margin-bottom: 6px; } .com-body-text { width: 100%; min-height: 160px; border: 0; background: transparent; resize: vertical; font-size: var(--font-xs); color: var(--color-text-primary); padding: 0; } .com-actions { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px 0 10px; } .com-send { font-size: var(--font-lg); display: inline-flex; align-items: center; gap: 6px; } .com-seal-myself { width: 210px; border: 0; border-radius: 15px; padding: 3px 10px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-md); cursor: pointer; } .com-seal-myself:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .com-pager { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 5px; } .com-pager-pos { display: flex; align-items: center; gap: 2px; font-size: var(--font-lg); } .com-pager-count { font-size: var(--font-xs); } .com-pager-done { font-size: var(--font-xs); color: var(--color-text-tertiary); } .com-pager-buttons { display: flex; gap: 10px; } .com-pager-btn { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); cursor: pointer; } .com-pager-btn:disabled { color: var(--color-text-tertiary); opacity: .5; cursor: default; } .com-busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--color-bg-base); opacity: .92; font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); text-align: center; } .com-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); opacity: .4; pointer-events: none; } .com-mention-overlay { z-index: calc(var(--z-modal) + 1); } .com-mention-popup { z-index: calc(var(--z-modal) + 2); } .com-mention-head { display: flex; flex-direction: column; min-width: 0; } .com-mention-address { border: 0; background: transparent; padding: 0; text-align: left; font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; border-radius: var(--radius-sm); } .com-mention-address:hover { background: var(--color-primary-surface); } .com-candidates { margin-top: 2px; font-size: var(--font-xs); text-align: center; } .com-muted { color: var(--color-text-tertiary); } .com-link { border: 0; background: transparent; padding: 2px 0; text-align: left; font-size: var(--font-xs); color: var(--color-primary-on-surface); cursor: pointer; border-radius: var(--radius-sm); } .com-link:hover { background: var(--color-primary-surface); } .com-phones { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; max-height: 120px; overflow-y: auto; } .com-phone { display: flex; flex-direction: column; } .com-phone-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .com-phone-number { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-sm); color: var(--color-text-primary); } .com-copy { border: 0; background: transparent; padding: 2px; display: inline-flex; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-primary); } .com-copy:hover { background: var(--color-primary-surface); }   .btn-remove-item { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-error); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-remove-item:hover { background: #fee; border-color: var(--color-error); } .doc-file-badge { background: var(--color-border-default); padding: 1px 6px; border-radius: 4px; font-size: 10px; } .confirm-label { flex: 0 0 120px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-text-tertiary); padding-top: 2px; } .confirm-value { flex: 1; font-size: 13px; color: var(--color-text-secondary); }   @media print { .sidebar, .topbar-user, .mobile-top-bar, .shipping-header, .shipping-form, .process-status-actions, .process-confirm-actions, .confirm-modal-footer, .btn-close-detail, .modal-overlay { display: none !important; } .shipping-layout { display: block !important; } .shipping-confirm-modal { position: static !important; transform: none !important; width: 100% !important; max-height: none !important; box-shadow: none !important; border: none !important; } .confirm-modal-header { border-bottom: 2px solid #000; } }     .su-panel { position: fixed; left: 30px; right: 30px; bottom: 30px; z-index: 1001; top: calc(var(--topbar-height) + 14px); display: flex; flex-direction: column; overflow: hidden; background: var(--color-text-primary); border: 6px solid var(--color-border-muted); border-radius: 10px; } .su-body { flex: 1; min-height: 0; display: flex; } .su-left { width: 41%; flex: none; min-width: 300px; display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; } .su-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px; } .su-files-card, .su-guide-card { background: var(--color-bg-base); border-radius: 5px; padding: 14px 16px; } .su-files-title { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin-bottom: 6px; } .su-tree { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; } .su-tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: none; border-radius: 3px; background: transparent; cursor: pointer; text-align: left; color: var(--color-text-primary); font-size: var(--font-sm); } .su-tree-item:hover { background: var(--color-primary-surface); } .su-tree-item.on { background: var(--color-primary-surface); } .su-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .su-tree-hint { margin-top: 8px; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .su-folder-label { margin-top: 10px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .su-folder-path { width: 100%; border: none; background: transparent; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .su-guide-card { text-align: center; } .su-guide-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-tertiary); margin-bottom: 20px; } .su-step { font-size: var(--font-lg); font-weight: 700; color: var(--color-primary-on-surface); margin-bottom: 8px; } .su-step-gap { margin-top: 28px; } .su-step-note { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .su-green-btn { margin-top: 6px; padding: 6px 16px; cursor: pointer; border: none; border-radius: 4px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); } .su-green-btn:disabled { opacity: .5; cursor: default; } .su-viewer-bar { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; } .su-menu-anchor { position: relative; } .su-menu-btn, .su-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 5px; cursor: pointer; color: var(--color-text-on-primary); } .su-menu-btn:hover, .su-close:hover { background: var(--color-primary-surface); } .su-close { margin-left: auto; } .su-menu { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 200px; padding: 4px; border-radius: 5px; background: var(--color-primary); } .su-menu-item { display: block; width: 100%; padding: 6px 10px; text-align: left; cursor: pointer; background: transparent; border: none; border-radius: 4px; color: var(--color-text-on-primary); font-size: var(--font-sm); } .su-menu-item:hover { background: var(--color-primary-hover, var(--color-primary)); }   .su-annot-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 5px 0; opacity: .8; } .su-annot-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 5px; cursor: pointer; color: var(--color-text-tertiary); } .su-annot-btn:hover { background: var(--color-primary-surface); } .su-annot-btn:disabled { opacity: .5; cursor: default; }   .su-annot-btn[hidden] { display: none; } .su-annot-cancel { background: var(--color-primary); }   .su-viewer { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; border: none; background: var(--color-bg-base); } .su-viewer-empty { background: var(--color-text-primary); } .su-fallback { padding: 8px; text-align: center; } .su-link { background: none; border: none; cursor: pointer; color: var(--color-primary-on-surface); font-size: var(--font-sm); border-bottom: 1px solid var(--color-primary); } .su-link:disabled { opacity: .5; cursor: default; } .su-menu-item:disabled { opacity: .5; cursor: default; }   .oa-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1002; width: 500px; max-width: calc(100vw - 32px); max-height: 750px; overflow-y: auto; padding: 20px; background: var(--color-bg-base); border: 5px solid var(--color-border-muted); border-radius: 10px; } .oa-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; } .oa-title { flex: 1; text-align: center; font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); } .oa-close { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 5px; cursor: pointer; color: var(--color-text-primary); } .oa-close:hover { background: var(--color-bg-sunken); } .oa-text { margin: 0 20px 10px; text-align: center; font-size: var(--font-sm); color: var(--color-text-primary); line-height: 1.5; } .oa-text-left { text-align: left; } .oa-warn { font-weight: 700; color: var(--color-error); } .oa-detail { max-height: 300px; overflow-y: auto; width: 400px; max-width: 100%; margin: 20px auto; } .oa-row { display: flex; gap: 8px; margin: 5px 0 5px 20px; } .oa-key { font-size: var(--font-sm); color: var(--color-text-secondary); } .oa-key-block { margin: 10px 20px 0; } .oa-val { font-size: var(--font-sm); color: var(--color-text-primary); } .oa-val-block { margin: 0 20px; white-space: pre-wrap; word-break: break-word; } .oa-open-row { display: flex; justify-content: flex-end; margin: 10px 20px 0 0; } .oa-open { background: none; border: none; cursor: pointer; font-weight: 700; color: var(--color-primary-on-surface); font-size: var(--font-sm); } .oa-actions { display: flex; justify-content: flex-end; gap: 4px; margin: 30px 20px 0 0; } .oa-ignore { padding: 6px 14px; cursor: pointer; border: none; border-radius: 4px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); } .oa-nowarn { padding: 6px 14px; cursor: pointer; border: none; border-radius: 4px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-sm); } 
/*css/screens/15-contacts-reaction.css*/
  .ext-avatar { font-weight: var(--weight-bold); font-size: 12px; } .ext-avatar.legal { background: #5B7FD6 !important; color: var(--color-bg-base) !important; } .ext-avatar.natural { background: #E88B3C !important; color: var(--color-bg-base) !important; } .contact-company-tag { display: inline-block; font-size: 10px; padding: 1px 6px; margin-left: 6px; background: #e8eaf6; color: #3949ab; border-radius: var(--radius-full); vertical-align: middle; } .ext-attr-badge { display: inline-block; font-size: 10px; padding: 1px 8px; margin-right: 6px; background: var(--color-warning-surface); color: #e65100; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); } .contact-detail-avatar-initial.ext-avatar { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-avatar); font-size: 20px; }   .ai-panel { position: fixed; top: var(--topbar-height); right: 0; bottom: 0; width: 380px; max-width: 100vw; background: var(--color-bg-base); border-left: 1px solid var(--color-border-default); z-index: var(--z-overlay); display: flex; flex-direction: column; overflow: hidden; } .ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); } .ai-panel-title { font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); } .ai-panel-close { width: 28px; height: 28px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ai-panel-close:hover { background: var(--color-bg-sunken); }   .ai-panel-header-actions { display: inline-flex; align-items: center; gap: 4px; } .ai-toolbar-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; } .ai-toolbar-btn:hover { background: var(--color-bg-sunken); color: var(--color-primary-on-surface); }   .ai-chat-header { gap: 8px; } .ai-only-you { flex: 1; min-width: 0; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .ai-chat-list-tools { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; } .ai-chat-search { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-sm); outline: none; } .ai-chat-search:focus { border-color: var(--color-primary); background: var(--color-bg-base); } .ai-chat-filter { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; } .ai-chat-filter-seg { padding: 5px 10px; border: 0; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .ai-chat-filter-seg + .ai-chat-filter-seg { border-left: 1px solid var(--color-border-default); } .ai-chat-filter-seg:hover:not(:disabled) { background: var(--color-primary-surface-light); } .ai-chat-filter-seg.is-checked { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .ai-chat-filter-seg:disabled { background: var(--color-bg-sunken); color: var(--color-text-disabled); cursor: default; } .ai-chat-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; } .ai-chat-list-empty { margin: 24px 8px; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); } .ai-chat-group-label { margin: 12px 8px 4px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .ai-chat-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; padding: 7px 8px; border-radius: var(--radius-md); cursor: pointer; } .ai-chat-row:hover { background: var(--color-bg-sunken); } .ai-chat-row-body { flex: 1; min-width: 0; } .ai-chat-row-title { font-size: var(--font-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-chat-row-meta { display: flex; gap: 6px; margin-top: 1px; font-size: var(--font-2xs); color: var(--color-text-tertiary); min-width: 0; } .ai-chat-row-theme { color: var(--color-primary-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-chat-row-time { flex: 0 0 auto; } .ai-chat-row-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; opacity: 0; } .ai-chat-row:hover .ai-chat-row-btn, .ai-chat-row-btn:focus-visible { opacity: 1; } .ai-chat-row-btn:hover { background: var(--color-bg-base); color: var(--color-text-primary); } .ai-chat-rename-input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); outline: none; }   .ai-history-device-note { margin: 4px 16px 0; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .ai-topic-divider { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ai-topic-divider::before, .ai-topic-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }   .ai-cost-card { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--color-ai-assist-border); border-radius: 10px; background: var(--color-ai-assist-surface); } .ai-cost-text { font-size: var(--font-xs); color: var(--color-text-primary); } .ai-cost-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .ai-stop-link { margin-left: 4px; }     .ai-steps { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; font-family: var(--font-mono); font-size: var(--font-xs); } .ai-step { display: flex; flex-direction: column; min-width: 0; } .ai-step-head { display: block; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: var(--color-text-primary); cursor: pointer; overflow-wrap: anywhere; } .ai-step-head::before { content: "● "; color: var(--color-primary-on-surface); } .ai-step-head:disabled { cursor: default; } .ai-step-head:hover:not(:disabled) { color: var(--color-primary-on-surface); } .ai-step.is-trial .ai-step-head::before { color: var(--color-warning); } .ai-step.is-trial .ai-step-head { color: var(--color-warning-on-surface); } .ai-step-detail { padding-left: 14px; color: var(--color-text-tertiary); overflow-wrap: anywhere; } .ai-step-detail::before { content: "⎿ "; }   .ai-mode-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 6px 14px 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .ai-mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); } .ai-mode-pill.is-try { background: var(--color-info-surface); border-color: var(--color-info); color: var(--color-info); font-weight: var(--weight-bold); } .ai-mode-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ai-mode-switch { color: var(--color-primary-on-surface); } .ai-mode-note { flex-basis: 100%; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .ai-ask-card { margin: 4px 0 8px; border: 1px solid var(--color-warning); border-radius: var(--radius-md); overflow: hidden; font-size: var(--font-sm); } .ai-ask-title { padding: 8px 12px; background: var(--color-warning-surface); font-weight: var(--weight-bold); color: var(--color-text-primary); } .ai-ask-body { margin: 8px 12px 0; padding: 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-elevated); font-family: var(--font-mono); font-size: var(--font-xs); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-primary); } .ai-ask-opts { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px; } .ai-ask-opt { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; 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); text-align: left; cursor: pointer; } .ai-ask-opt:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .ai-ask-opt:disabled { opacity: 0.6; cursor: default; } .ai-ask-key { min-width: 1.2em; font-family: var(--font-mono); color: var(--color-text-tertiary); } .ai-ask-answered { padding: 8px 12px 10px; font-size: var(--font-xs); color: var(--color-text-secondary); } .ai-ask-card.is-answered { border-color: var(--color-border-default); } .ai-ask-card.is-answered .ai-ask-title { background: var(--color-bg-sunken); }   .ai-mem-card { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-bg-base); font-size: var(--font-sm); } .ai-mem-card.is-withdrawn { border-color: var(--color-border-default); opacity: 0.7; } .ai-mem-card-title { font-weight: var(--weight-bold); color: var(--color-text-primary); } .ai-mem-dl { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 4px 8px; margin: 0; } .ai-mem-dl dt { color: var(--color-text-tertiary); } .ai-mem-dl dd { margin: 0; color: var(--color-text-primary); overflow-wrap: anywhere; } .ai-mem-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .ai-mem-actions .ai-save-btn { margin-right: 0; } .ai-mem-edit { display: flex; flex-direction: column; gap: 6px; } .ai-mem-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font: inherit; font-size: var(--font-sm); } .ai-mem-input:focus { outline: none; border-color: var(--color-primary); } .ai-mem-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ai-mem-view { flex: 1; overflow-y: auto; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 14px; } .ai-mem-title { flex: 1; min-width: 0; text-align: center; } .ai-mem-count { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .ai-mem-section { display: flex; flex-direction: column; gap: 6px; } .ai-mem-section-title { margin: 0; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-primary); } .ai-mem-empty { font-size: var(--font-xs); color: var(--color-text-tertiary); } .ai-mem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-default); font-size: var(--font-sm); } .ai-mem-row .ai-mem-edit { grid-column: 1 / -1; } .ai-mem-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--color-text-primary); overflow-wrap: anywhere; } .ai-mem-pending { align-self: flex-start; padding: 0 6px; border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning-on-surface); font-size: var(--font-2xs); } .ai-mem-curator-add { display: flex; gap: 8px; align-items: center; } .ai-mem-curator-add .ai-mem-input { flex: 1; min-width: 0; } .ai-mem-curator-add .ai-save-btn { margin-right: 0; flex: 0 0 auto; }   .ai-chat-row-busy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary-on-surface); } .ai-chat-row-busy::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); animation: ai-busy-pulse 1.2s infinite; } @keyframes ai-busy-pulse { 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .ai-chat-row-busy::before { animation: none; } }     .ai-batch { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; min-width: 0; } .ai-batch-progress { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-xs); } .ai-batch-head { font-family: var(--font-mono); color: var(--color-text-primary); overflow-wrap: anywhere; } .ai-batch-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; } .ai-batch-detail { padding-left: 14px; color: var(--color-text-tertiary); overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--font-xs); } .ai-batch-bar { height: 6px; border-radius: 3px; background: var(--color-border-default); overflow: hidden; } .ai-batch-bar > span { display: block; height: 100%; background: var(--color-primary); transition: width 0.3s ease; } @media (prefers-reduced-motion: reduce) { .ai-batch-bar > span { transition: none; } } .ai-batch-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-text-secondary); } .ai-batch-warn { margin: 8px 12px 0; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning-on-surface); font-size: var(--font-xs); } .ai-batch-table-wrap { overflow-x: auto; } .ai-batch-table { width: 100%; border-collapse: collapse; font-size: var(--font-xs); } .ai-batch-table th, .ai-batch-table td { padding: 6px; border-bottom: 1px solid var(--color-border-default); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .ai-batch-table td { color: var(--color-text-primary); } .ai-batch-table th { color: var(--color-text-tertiary); font-weight: var(--weight-medium); font-size: var(--font-2xs); } .ai-batch-table tr.is-clickable { cursor: pointer; } .ai-batch-table tr.is-clickable:hover td { background: var(--color-primary-surface-light); } .ai-batch-flag { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--font-2xs); white-space: nowrap; color: var(--color-text-secondary); } .ai-batch-flag.is-ok { background: var(--color-primary-surface); color: var(--color-primary-dark); } .ai-batch-flag.is-warn { background: var(--color-warning-surface); color: var(--color-warning-on-surface); white-space: normal; } .ai-batch-flag.is-diff { background: var(--color-info-surface); color: var(--color-info); } .ai-batch-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; } .ai-batch-edit .ai-chat-search { margin: 0; } .ai-batch-edit-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); } .ai-batch-edit-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: var(--font-sm); color: var(--color-text-primary); cursor: pointer; } .ai-batch-edit-row:hover { background: var(--color-primary-surface-light); } .ai-batch-edit-title { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ai-batch-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ai-batch-save .ai-mem-input { flex: 1; min-width: 160px; width: auto; } .ai-batch-save .ai-save-btn { margin-right: 0; flex: 0 0 auto; } .ai-batch-save .ai-batch-warn { flex-basis: 100%; margin: 0; }   .ai-saved-more { display: block; margin: 2px 8px 8px; }   .ai-empty-lead { margin: auto; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); } .ai-empty-lead svg { color: var(--color-primary-surface); fill: currentColor; } .ai-panel-messages { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; } .ai-msg { display: flex; } .ai-msg-user { justify-content: flex-end; } .ai-msg-bot { justify-content: flex-start; } .ai-msg-bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; } .ai-bubble-user { background: var(--color-primary); color: var(--color-text-on-primary); border-bottom-right-radius: 4px; } .ai-bubble-bot { background: var(--color-bg-sunken); color: var(--color-text-primary); border-bottom-left-radius: 4px; } .ai-msg-text { white-space: pre-wrap; word-break: break-word; } .ai-msg-link { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); text-decoration: none; } .ai-msg-link:hover { text-decoration: underline; } .ai-msg-actions { margin-top: 4px; } .ai-link-btn { border: 0; padding: 0; background: transparent; font-size: 10px; color: var(--color-text-tertiary); cursor: pointer; } .ai-link-btn:hover { color: var(--color-primary-on-surface); text-decoration: underline; } .ai-thinking { font-size: 12px; color: var(--color-text-tertiary); }   .ai-turn-status { display: inline-flex; align-items: center; gap: 8px; padding: 2px 2px 10px; } .ai-turn-spinner { width: 14px; height: 14px; border: 2px solid var(--color-primary-surface); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.9s linear infinite; } .ai-turn-check { font-size: 12px; color: var(--color-primary-on-surface); } .ai-bubble-bot.is-error { color: var(--color-error); } .ai-bubble-bot.is-neutral { color: var(--color-text-secondary); }   .ai-msg-attachments { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-on-primary-muted); }   .ai-file-note { margin-bottom: 6px; font-size: var(--font-xs); color: var(--color-text-secondary); } .ai-file-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--color-primary); border-radius: 8px; background: var(--color-primary-surface); color: var(--color-text-primary); font-size: var(--font-sm); cursor: pointer; } .ai-file-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; } .ai-file-pill-open { color: var(--color-primary-on-surface); }   .ai-save-btn { height: 28px; margin-right: 10px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); cursor: pointer; } .ai-save-btn:hover { background: var(--color-primary-dark); } .ai-save-btn:disabled { background: var(--color-primary-muted); cursor: default; }   .ai-sources { margin-top: 10px; } .ai-sources-title { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .ai-sources-title:hover { color: var(--color-primary-on-surface); } .ai-sources-caret { font-size: var(--font-2xs); } .ai-sources-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ai-source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-sunken); cursor: pointer; } .ai-source-chip:hover { background: var(--color-primary-surface); } .ai-source-index { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .ai-source-title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-primary); } .ai-source-open { font-size: var(--font-2xs); color: var(--color-primary-on-surface); }   .ai-composer { margin: 8px 14px 12px; padding: 8px 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 16px; }   .ai-panel.is-drop-target .ai-composer { border: 2px solid var(--color-primary); } .ai-input { min-height: 40px; padding: 4px 2px; border: 0; background: transparent; font-size: var(--font-sm); color: var(--color-text-primary); outline: none; } .ai-input::placeholder { color: var(--color-text-tertiary); } .ai-input:disabled { opacity: 0.5; }   .ai-send-btn { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ai-send-btn:hover { background: var(--color-primary-dark); } .ai-send-btn:disabled { background: var(--color-primary-muted); cursor: default; }   .ai-stop-icon { width: 13px; height: 13px; border-radius: 2.5px; background: var(--color-text-on-primary); }   .ai-composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ai-composer-left { display: flex; align-items: center; gap: 6px; }   .ai-format-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: var(--color-bg-sunken); color: var(--color-text-secondary); cursor: pointer; } .ai-format-chip:hover { background: var(--color-primary-surface); } .ai-format-label { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-primary); } .ai-format-caret { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ai-attach-btn { position: relative; }   .ai-attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ai-format-wrap { position: relative; } .ai-format-menu-backdrop { position: fixed; inset: 0; z-index: 1; }   .ai-format-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 2; min-width: 190px; padding: 4px; display: flex; flex-direction: column; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .ai-format-item { padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .ai-format-item:hover { background: var(--color-bg-sunken); } .ai-format-item.is-current { color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .ai-format-sep { height: 1px; margin: 4px 2px; background: var(--color-border-default); }   .ai-attach-bar { display: flex; flex-wrap: wrap; gap: 6px; } .ai-attach-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: var(--radius-md); background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); } .ai-attach-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); } .ai-attach-remove { margin-left: 3px; padding: 0; border: 0; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .ai-attach-remove:hover { color: var(--color-text-primary); } @media (max-width: 480px) { .ai-panel { width: 100vw; } }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { body:has(.space-tabs.space-tabs-top:not(.collapsed)) .ai-panel { top: calc(var(--topbar-height) + var(--space-tabs-height)); } body:has(.space-tabs.space-tabs-top.collapsed) .ai-panel { top: calc(var(--topbar-height) + var(--space-tabs-collapsed-height)); } }   .cabinet-status-divider { width: 1px; height: 14px; margin: 0 8px; background: var(--color-border-default); } .cabinet-status-ai { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: none; border-radius: 5px; background: none; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .cabinet-status-ai svg { fill: currentColor; } .cabinet-status-ai:hover { background: var(--color-bg-sunken); }   .reaction-picker-wrapper { position: relative; display: inline-flex; } .reaction-picker-overlay { position: fixed; inset: 0; z-index: 99; } .reaction-picker-popover { position: absolute; top: 100%; left: 0; z-index: var(--z-sticky); display: flex; gap: 2px; padding: 6px 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); animation: panel-open var(--duration-fast) ease forwards; } .reaction-picker-emoji { background: none; border: none; font-size: 20px; padding: 4px 6px; cursor: pointer; border-radius: 8px; transition: background 150ms, transform 100ms; } .reaction-picker-emoji:hover { background: var(--color-primary-surface); transform: scale(1.2); }   .reaction-picker-emoji:active { background: var(--color-primary-surface); } .reaction-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 2px 0; } .reaction-badge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; font-size: 12px; background: var(--color-border-default); border: 1px solid #d0d0d0; border-radius: 9999px; cursor: pointer; transition: background 150ms, border-color 150ms; } .reaction-badge:hover { background: var(--color-border-default); } .reaction-badge.mine { background: var(--color-primary-surface); border-color: var(--color-primary); } .reaction-badge.mine:hover { background: var(--color-primary-muted); }   .msg-reactions-inline { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 0 0 42px; } .reaction-badge-sm { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: var(--radius-full); font-size: 10px; background: var(--color-border-default); border: 1px solid transparent; cursor: default; } .reaction-badge-sm.mine { background: var(--color-primary-surface); border-color: var(--color-primary); }   .mention-popup { position: absolute; bottom: 100%; left: 16px; background: white; border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: var(--z-dropdown); max-height: 200px; overflow-y: auto; min-width: 250px; } .mention-item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; } .mention-item:hover { background: var(--color-primary-surface-light); }   .mention-item { align-items: center; } .mention-item-name { flex: 0 0 auto; white-space: nowrap; font-weight: var(--weight-semibold); font-size: var(--font-sm); } .mention-item-addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .mention-item.is-selected { background: var(--color-primary-surface-light); } .mention-item-roles { flex: 0 0 auto; display: inline-flex; gap: var(--space-1); margin-left: auto; } .mention-role-btn { border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); border-radius: var(--radius-sm); font-size: var(--font-xs); padding: 0 var(--space-2); cursor: pointer; } .mention-role-btn:hover { border-color: var(--color-primary); color: var(--color-primary-on-surface); }   .msg-draft-badge { margin-bottom: 2px; }     .cc-tablist { display: none; }   .cc-req { color: var(--color-error); margin-left: 3px; }   .form-group label.cc-radio { display: inline-flex; align-items: center; gap: 4px;   flex: 0 0 auto; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-primary); } .form-group label.cc-radio input { accent-color: var(--color-primary); }   .cc-field-title { display: block; font-weight: var(--weight-semibold); font-size: var(--font-xs); color: var(--color-text-tertiary); margin-bottom: 4px; }   .cc-view-list { list-style: none; margin: 0 0 16px; padding: 0; } .cc-view-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--font-sm); } .cc-view-label { color: var(--color-text-tertiary); font-size: var(--font-xs); min-width: 72px; flex-shrink: 0; } .cc-copy-btn { background: none; border: none; border-radius: var(--radius-sm); padding: 2px; cursor: pointer; color: var(--color-text-primary); opacity: 0; transition: opacity 0.1s; } .cc-view-item:hover .cc-copy-btn, .cc-view-address:hover .cc-copy-btn, .cc-copy-btn:focus-visible { opacity: 1; } .cc-copy-btn:hover { background: var(--color-primary-surface); }   .cc-view-link { color: var(--color-primary-on-surface); cursor: pointer; } .cc-view-link:hover { text-decoration: underline; }   .contact-qr-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1100; min-width: 200px; max-width: 240px; padding: 16px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); text-align: center; } .contact-qr-title { font-weight: 600; font-size: var(--font-base); color: var(--color-text-primary); } .contact-qr-image { display: inline-block; margin-top: 12px; padding: 8px; border-radius: 8px; background: #fff; line-height: 0; } .contact-qr-name { margin-top: 10px; font-weight: 600; font-size: var(--font-base); color: var(--color-text-primary); word-break: break-word; } .contact-qr-phone { margin-top: 2px; font-size: var(--font-xs); color: var(--color-text-secondary); } .contact-qr-note { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); }   .cc-edit-list { list-style: none; margin: 0 0 6px; padding: 0; } .cc-edit-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; } .cc-edit-fields { display: flex; flex-direction: column; gap: 4px; flex: 1; }   .cc-add-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; border-radius: var(--radius-sm); padding: 2px 6px; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-tertiary); } .cc-add-link:hover { background: var(--color-primary-surface); } .cc-add-mark { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-text-tertiary); color: var(--color-bg-base);   font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; } 
/*css/screens/16-cabinet-advanced.css*/
  .cabinet-main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }   .drag-over-folder { background: var(--color-primary-surface) !important; outline: 2px dashed var(--color-primary); outline-offset: -2px; transition: all var(--duration-fast) ease; }   .drag-over-trash { background: #ffe0e0 !important; outline-color: var(--color-error) !important; }   .cabinet-file-row.dragging { opacity: 0.5; } .cabinet-tab { padding: 6px 8px; background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; white-space: nowrap; transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); } .cabinet-tab:hover { color: var(--color-text-secondary); } .cabinet-tab.active { color: var(--color-primary-on-surface); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }   .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-medium); } .tag-chip-remove { background: none; border: none; cursor: pointer; font-size: 10px; color: var(--color-text-tertiary); padding: 0 2px; line-height: 1; } .tag-chip-remove:hover { color: var(--color-error); }   .keyword-manager-dialog { width: 400px; } .keyword-add-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); align-items: center; flex-wrap: wrap; } .keyword-input { flex: 1; } .keyword-add-btn { flex-shrink: 0; padding: 6px 12px !important; }   .keyword-add-btn:active:not(:disabled), .member-add-section .cabinet-btn-action:active:not(:disabled) { opacity: 0.84; } .keyword-cancel-btn { flex-shrink: 0; }   .keyword-add-label, .member-add-label { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); flex-shrink: 0; } .keyword-add-required, .member-add-required { color: var(--color-error); margin-left: 2px; }   .keyword-hit { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--font-xs); color: var(--color-text-tertiary); } .keyword-hit.hit { color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .keyword-hit-icon { flex-shrink: 0; } .keyword-hit-count { margin: 0 2px; } .keyword-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .keyword-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-default); font-size: var(--font-sm); } .keyword-item:last-child { border-bottom: none; } .keyword-text { color: var(--color-text-secondary); } .pdf-tab { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: var(--font-sm); color: var(--color-text-tertiary); cursor: pointer; border-right: 1px solid var(--color-border-default); background: var(--color-bg-sunken); white-space: nowrap; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); max-width: 180px; } .pdf-tab:hover { background: var(--color-bg-base); color: var(--color-text-secondary); } .pdf-tab.active { background: var(--color-bg-base); color: var(--color-text-secondary); font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-primary); } .pdf-tab-close { background: none; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; border-radius: 2px; flex-shrink: 0; } .pdf-tab-close:hover { background: var(--color-border-default); color: var(--color-error); } .pdf-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; gap: 8px; } .pdf-viewer-toolbar-left, .pdf-viewer-toolbar-center, .pdf-viewer-toolbar-right { display: flex; align-items: center; gap: 4px; } .pdf-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; font-size: var(--font-sm); text-decoration: none; transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); } .pdf-toolbar-btn:hover:not(:disabled) { background: var(--color-primary-surface); border-color: var(--color-primary); } .pdf-toolbar-btn:disabled { opacity: 0.4; cursor: default; } .pdf-page-info { font-size: var(--font-sm); color: var(--color-text-secondary); display: flex; align-items: center; gap: 4px; } .pdf-page-input { width: 44px; padding: 2px 4px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-sm); text-align: center; outline: none; } .pdf-page-input:focus { border-color: var(--color-primary); } .pdf-zoom-info { font-size: var(--font-sm); color: var(--color-text-tertiary); min-width: 40px; text-align: center; } .pdf-viewer-canvas-container { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 10px; background: var(--color-border-default); position: relative; } .pdf-viewer-canvas { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); background: white; max-width: 100%; } .pdf-viewer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.8); z-index: 10; color: var(--color-text-tertiary); font-size: var(--font-sm); } .pdf-viewer-error { color: var(--color-error); font-size: var(--font-sm); padding: 20px; text-align: center; } .cabinet-file-row { position: relative; }   .member-management-dialog { width: 600px; max-height: 80vh; overflow-y: auto;   display: flex; flex-direction: column; overflow-x: hidden; } .member-add-section {   flex: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 12px; margin-bottom: 16px; background: var(--color-bg-sunken); } .member-search-row { display: flex; gap: 8px; align-items: center; } .member-search-row .settings-input { flex: 1; } .member-role-select { width: 120px; } .member-search-results { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); max-height: 150px; overflow-y: auto; margin-top: 4px; } .member-search-item { padding: 6px 10px; cursor: pointer; font-size: var(--font-sm); } .member-search-item:hover { background: var(--color-primary-surface-light); } .member-selected-staff { margin-top: 8px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .member-list-section { margin-bottom: 12px;   flex: 1 1 auto; min-height: 0; overflow-y: auto; }   .member-invite-guest { display: inline-block; align-self: flex-start; margin-top: 8px; padding: 0; } .member-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); } .member-table th, .member-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--color-border-default); } .member-table th { background: var(--color-bg-sunken); color: var(--color-text-tertiary); font-weight: var(--weight-semibold); } .member-role-inline { width: 110px; font-size: var(--font-sm); padding: 2px 4px; } .cabinet-btn-danger-sm { background: none; border: 1px solid var(--color-error); color: var(--color-error); padding: 2px 8px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-xs); } .cabinet-btn-danger-sm:hover { background: #fde8e8; } .cabinet-btn-text:hover { text-decoration: underline; } .storage-bar-fill { height: 100%; background: var(--color-primary-surface); border-radius: 7px; transition: width var(--duration-slow) ease; }   .character-library-dialog { width: 640px; max-height: 85vh; overflow-y: auto; } .character-list-scroll { max-height: 400px; overflow-y: auto; } .character-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; } .character-list-item:hover { background: var(--color-bg-sunken); } .character-item-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-surface); color: var(--color-bg-base); display: flex; align-items: center; justify-content: center; font-size: var(--font-sm); font-weight: var(--weight-bold); flex-shrink: 0; } .character-item-info { flex: 1; min-width: 0; } .character-item-name { display: block; font-weight: var(--weight-semibold); font-size: var(--font-sm); } .character-item-meta { display: block; font-size: var(--font-xs); color: var(--color-text-tertiary); } .character-item-actions { display: flex; gap: 4px; flex-shrink: 0; } 
/*css/screens/17-mobile-nav.css*/
    @keyframes badge-bounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.95); } }   @keyframes send-success { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } .btn-send.success { animation: send-success var(--duration-slow) ease; background: var(--color-success) !important; } @keyframes thread-slide-down { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 2000px; } }   h1, h2, h3, h4, h5, h6 { line-height: 1.3; }     @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); z-index: 1100; justify-content: space-around; align-items: center; padding: 0 4px; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); } .mobile-bottom-nav .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--color-text-tertiary); font-size: 9px; font-weight: var(--weight-medium); gap: 2px; padding: 4px 8px; border-radius: 8px; transition: color var(--duration-fast), background var(--duration-fast); position: relative; }   .mobile-bottom-nav .bottom-nav-item { min-width: 0; } .mobile-bottom-nav .bottom-nav-item > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-bottom-nav .bottom-nav-item.active { color: var(--color-primary-on-surface); background: var(--color-primary-surface); }   @media (hover: hover) { .mobile-bottom-nav .bottom-nav-item:hover { color: var(--color-primary-on-surface); background: var(--color-primary-surface); } } .mobile-bottom-nav .bottom-nav-item svg { width: 22px; height: 22px; } .bottom-nav-icon-wrap { position: relative; display: inline-flex; } .mobile-bottom-nav .bottom-nav-badge { position: absolute; top: 0; right: 0; min-width: 14px; height: 14px; background: var(--color-error); color: white; font-size: 8px; font-weight: var(--weight-bold); border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }   .main-content { padding-bottom: 56px; }   body:has(.talk-layout.mobile-show-detail) .mobile-bottom-nav,   body:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)) .mobile-bottom-nav, body:has(.slide-over-panel.open) .mobile-bottom-nav,   body:has(.modal-overlay) .mobile-bottom-nav { display: none; } body:has(.modal-overlay) .main-content, body:has(.talk-layout.mobile-show-detail) .main-content, body:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)) .main-content, body:has(.slide-over-panel.open) .main-content,   .app-layout.has-native-tabbar .main-content { padding-bottom: 0; }   body:has(.mobile-bottom-nav) .nav-menu > .nav-link, body:has(.mobile-bottom-nav) .nav-menu > .nav-separator { display: none; }   body:has(.talk-layout.mobile-show-detail) .nav-menu > .nav-link, body:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)) .nav-menu > .nav-link, body:has(.slide-over-panel.open) .nav-menu > .nav-link { display: flex; } body:has(.talk-layout.mobile-show-detail) .nav-menu > .nav-separator, body:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)) .nav-menu > .nav-separator, body:has(.slide-over-panel.open) .nav-menu > .nav-separator { display: block; }   .mobile-bottom-nav.native-tabbar-probe { visibility: hidden; pointer-events: none; height: 0; padding: 0; border: 0; box-shadow: none; } }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { .mobile-bottom-nav { display: none; } }       ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--scrollbar-thumb) 40%, transparent); border-radius: var(--radius-full); transition: background var(--duration-normal); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--scrollbar-thumb-hover) 70%, transparent); }   .thread-list::-webkit-scrollbar-thumb,.tracking-list::-webkit-scrollbar-thumb,.feature-table-wrap::-webkit-scrollbar-thumb{ background: transparent; } .thread-list:hover::-webkit-scrollbar-thumb,.tracking-list:hover::-webkit-scrollbar-thumb,.feature-table-wrap:hover::-webkit-scrollbar-thumb{ background: rgba(0, 0, 0, 0.12); }   input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), select, textarea { font-family: inherit; font-size: var(--font-sm);   color: var(--form-input-fg, var(--color-text-secondary)); transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.1); }   .feature-table { border-spacing: 0; } .feature-table th { background: var(--color-bg-elevated); padding: 10px 12px; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-default); } .feature-table td { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; } .feature-table tbody tr { transition: background var(--duration-fast) var(--ease-default); } .feature-table tbody tr:hover { background: var(--color-primary-surface-light); } .feature-table tbody tr:last-child td { border-bottom: none; }   .status-badge { padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.2px; }     .modal-overlay { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: modal-fade-in var(--duration-fast) ease; } .modal-dialog { border-radius: var(--radius-xl); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); animation: modal-scale-in var(--duration-normal) ease; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-scale-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .modal-header { padding: 18px 24px; background: var(--color-bg-elevated); } .modal-header h3 { font-size: var(--font-lg); font-weight: var(--weight-bold); letter-spacing: -0.2px; } .modal-body { padding: 20px 24px; } .modal-footer { padding: 14px 24px; background: var(--color-bg-elevated); } .detail-row { padding: 6px 0; font-size: var(--font-sm); } .detail-label { color: var(--color-text-tertiary); font-weight: var(--weight-semibold); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.3px; min-width: 90px; }   .tracking-list { border-radius: var(--radius-lg); background: var(--color-bg-base); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .tracking-detail { border-radius: var(--radius-lg); background: var(--color-bg-base); box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 20px; } .tracking-item { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); transition: background var(--duration-fast) var(--ease-default); } .tracking-item:hover { background: var(--color-primary-surface-light); } .tracking-item.selected { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }   .tracking-event .event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-primary-surface); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.1); }   .avatar-menu { border-radius: var(--radius-lg); padding: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); min-width: 200px; } .avatar-menu-item { border-radius: var(--radius-md); padding: 9px 12px; font-size: var(--font-sm); transition: background var(--duration-fast) var(--ease-default); }   .compose-textarea { padding: 14px 18px; font-size: var(--font-base); line-height: 1.7; min-height: 180px; } .compose-textarea:focus { background: var(--color-bg-elevated); }     .feature-empty { padding: 60px 40px; color: var(--color-text-disabled); font-size: var(--font-md); line-height: 1.6; }   .btn-danger { border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast); } .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3); } .btn-danger:active { transform: translateY(0); }   .btn-sm { border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast); } .btn-sm:hover { border-color: var(--color-border-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }   .settings-checkbox input[type="checkbox"] { accent-color: var(--color-primary); } .settings-textarea { border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); } .settings-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.1); }   .tracking-progress-container { background: #f9fafb; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; } .tracking-progress { display: flex; align-items: flex-start; } .tracking-progress .step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; } .tracking-progress .step:last-child { flex: 0 0 auto; } .tracking-progress .step-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; flex-shrink: 0; }   .tracking-progress .step-person { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; padding: 0; border: none; background: transparent; cursor: pointer; } .tracking-progress .step-person-avatar { width: 26px; height: 26px; border-radius: var(--radius-avatar); display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 10px; font-weight: var(--weight-semibold); }   .tracking-progress .step-person-avatar.has-image { background: transparent; overflow: hidden; } .tracking-progress .step-person-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .tracking-progress .step-person-avatar.is-system { background: var(--color-bg-base); } .tracking-progress .step-person.is-system { cursor: default; } .tracking-progress .step-person-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .tracking-progress .step-person-stack { display: flex; align-items: center; margin-bottom: 4px; } .tracking-progress .step-person-stacked { margin-left: -8px; } .tracking-progress .step-person-stacked:first-child { margin-left: 0; } .tracking-progress .step-person-stacked .step-person-avatar { border: 1px solid var(--color-bg-base); }   .tracking-progress .step-person-group { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; } .tracking-progress .step-person-group .step-person-stack { margin-bottom: 0; } .tracking-progress .step-person-overflow { width: 26px; height: 26px; margin-left: -8px; border-radius: var(--radius-avatar); display: flex; align-items: center; justify-content: center; background: var(--color-feature-tracking); color: var(--color-text-on-primary); border: 1px solid var(--color-bg-base); font-size: 10px; font-weight: var(--weight-bold); } .tracking-progress .step-line { position: absolute; top: 10px; left: 20px; right: 0; height: 3px; border-radius: 1.5px; } .tracking-progress .step-label { font-size: 11px; margin-top: 6px; color: #9ca3af; }   .tracking-progress .step-completed .step-dot { background: var(--color-primary); border: 2px solid var(--color-primary); } .tracking-progress .step-completed .step-line { background: var(--color-primary); } .tracking-progress .step-completed .step-label { color: #1a1a2e; }   .tracking-progress .step-current .step-dot { background: var(--color-primary); border: 2px solid var(--color-primary); animation: pulse-dot 1.5s ease-in-out infinite; } .tracking-progress .step-current .step-line { background: #d1d5db; border-style: dashed; } .tracking-progress .step-current .step-label { color: #1a1a2e; font-weight: 600; }   .tracking-progress .step-pending .step-dot { background: transparent; border: 2px solid #d1d5db; } .tracking-progress .step-pending .step-line { background: #d1d5db; }   .tracking-progress .step-error .step-dot { background: #ef4444; border: 2px solid #ef4444; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,187,128,0.4); } 50% { box-shadow: 0 0 0 6px rgba(34,187,128,0); } }   .tracking-item {   display: block; padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .tracking-item:hover { background: var(--color-primary-surface-light); } .tracking-item.selected { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); } .tracking-item-row1 { display: flex; align-items: center; gap: 6px; } .tracking-genre-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }   .genre-dot-send { background: var(--color-feature-tracking); } .genre-dot-recv { background: var(--color-mail-receive); } .genre-dot-fallback { background: var(--color-warning); } .genre-dot-error { background: var(--color-error); } .genre-dot-default { background: #9ca3af; } .tracking-item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tracking-item-row2, .tracking-item-row3 { margin-left: 14px; font-size: 11px; color: var(--color-text-tertiary); display: flex; gap: 8px; } .tracking-item-row3 { font-size: 10px; }   .tracking-latest-event { background: #f0fdf4; border-bottom: 2px solid var(--color-primary); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .latest-event-text { font-size: 13px; } .latest-event-time { margin-left: auto; font-size: 11px; color: var(--color-text-tertiary); }   .loading-spinner-large { border-width: 3px; border-color: rgba(34, 187, 128, 0.15); border-top-color: var(--color-primary); }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mobile-sidebar-overlay.active { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar.mobile-open { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } .mobile-top-bar { background: var(--color-bg-base); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 4px rgba(0,0,0,0.04); } }   button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }   .feature-page { animation: page-fade-in var(--duration-normal) ease; } .talk-layout { animation: page-fade-in var(--duration-fast) ease; } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }     :where([title]) { position: relative; }   ::selection { background: rgba(34, 187, 128, 0.25); color: inherit; }   .popup-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .popup-body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }   .login-form-inner input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.12); }   .msg-avatar-initial { font-weight: var(--weight-bold); letter-spacing: -0.5px; }   .cabinet-sortable { border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast); } .cabinet-sortable:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }   .feature-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); } .compliance-log-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }   button:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }   .feature-empty svg { width: 48px; height: 48px; color: var(--color-border-muted); margin-bottom: 12px; } .feature-empty p { margin-top: 4px; font-size: var(--font-sm); color: var(--color-text-tertiary); }   .home-card { transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease; } .home-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }   @media print { .feature-table td, .feature-table th { border: 1px solid var(--color-border-muted) !important; } }   .avatar-menu-separator { margin: 4px 0; border: none;   border-top: 1px solid var(--color-border-default); } .theme-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--color-border-default); gap: 8px; min-height: 60px; } .theme-item:hover { background: var(--color-primary-surface-light); } .theme-item.active { background: var(--color-primary-surface); border-left: 3px solid var(--color-primary); padding-left: 13px; }   .folder-section-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; margin-top: 12px; cursor: pointer; user-select: none; position: relative;   color: var(--color-text-tertiary); text-transform: uppercase; font-size: 11px; } .folder-section-header:hover { background: var(--color-primary-surface-light); } .folder-section-header-left { display: flex; align-items: center; gap: 6px; } .folder-section-header-right { display: flex; align-items: center; gap: 4px; } .folder-section-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } .folder-section-header::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; border-top: 1px solid var(--color-border-default); } .folder-section-header-text { font-size: var(--font-xs); font-weight: var(--weight-semibold);   color: var(--color-text-primary); letter-spacing: 0.02em; } .folder-section-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: var(--weight-bold); color: white; } .folder-section-badge.green { background: var(--color-primary); } .folder-section-badge.red { background: var(--color-error); }   .folder-section-badge.gray { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); } .folder-toggle-arrow { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s ease; color: var(--color-text-tertiary); } .folder-toggle-arrow.open { transform: rotate(90deg); } .folder-list-secondary { padding-left: 0; }   .folder-dm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--color-primary); color: white; font-size: 10px; font-weight: var(--weight-bold); flex-shrink: 0; margin-right: 2px; }   .folder-smart-search { padding: 2px 8px 4px; } .folder-search-input { width: 100%; padding: 4px 8px; font-size: var(--font-xs); border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); color: var(--color-text-primary); outline: none; box-sizing: border-box; } .folder-search-input:focus { border-color: var(--color-primary); } .folder-search-input::placeholder { color: var(--color-text-tertiary); } .folder-item-link .folder-name-link { color: var(--color-primary-on-surface); font-size: var(--font-xs); } .folder-item-link:hover .folder-name-link { text-decoration: underline; }   .folder-icon-rail { display: flex; flex-direction: column; align-items: stretch; padding-top: var(--space-3); gap: 0; }   .rail-icon-btn { position: relative; height: 50px; margin: 1px 3px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-default); color: var(--color-text-secondary); } .rail-icon-btn:hover { background: var(--color-primary-surface-light); } .rail-icon-btn:active { background: var(--color-primary-surface); }   .rail-icon-btn.rail-row-current::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--color-primary); }   .rail-menu-overlay { position: fixed; inset: 0; z-index: var(--z-dropdown, 1000); background: transparent; } .rail-menu-card { position: fixed; z-index: calc(var(--z-dropdown, 1000) + 1); min-width: 210px; max-width: 240px; padding: 5px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-md); overflow-x: hidden; overflow-y: auto; } .rail-menu-card:focus { outline: none; }   .rail-menu-go { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: none; border-radius: 4px; background: transparent; cursor: pointer; text-align: left; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .rail-menu-go:hover { background: var(--color-primary-surface-light); } .rail-menu-go:active { background: var(--color-primary-surface); }   .rail-row-icon { position: relative; width: 34px; height: 22px; display: flex; align-items: center; justify-content: center; }   .rail-row-label { margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-3xs); font-weight: var(--weight-medium); color: var(--color-sidebar-tool-label); }   .panel-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 4px;   white-space: nowrap; flex-shrink: 0; height: 32px; margin: 8px 5px 2px; padding: 0 6px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .panel-toggle-btn:hover { background: var(--color-bg-elevated); color: var(--color-text-secondary); } .panel-toggle-btn:active { background: var(--color-bg-sunken); }   .folder-header .panel-toggle-btn { margin: 0; }   .rail-sep { align-self: center; width: 34px; height: 1px; margin: 6px 0 4px; background: var(--color-border-default); }   .rail-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; background: var(--color-error); border-radius: 8px; color: var(--color-text-on-primary); font-size: var(--font-2xs); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); padding: 0 4px; } .rail-badge.info { background: var(--color-info); } .rail-badge.muted { background: var(--color-text-tertiary); }   .rail-badge.pin { background: var(--color-feature-pin); }   .icon-12 { width: 12px; height: 12px; flex-shrink: 0; } .icon-13 { width: 13px; height: 13px; flex-shrink: 0; } .icon-14 { width: 14px; height: 14px; flex-shrink: 0; } .icon-15 { width: 15px; height: 15px; flex-shrink: 0; } .icon-16 { width: 16px; height: 16px; flex-shrink: 0; } .icon-18 { width: 18px; height: 18px; flex-shrink: 0; } .icon-20 { width: 20px; height: 20px; flex-shrink: 0; } .icon-24 { width: 24px; height: 24px; flex-shrink: 0; }     .feature-empty-enhanced { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; text-align: center; } .feature-empty-enhanced svg { width: 56px; height: 56px; color: var(--color-border-muted); margin-bottom: 16px; opacity: 0.6; } .feature-empty-enhanced .empty-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-bottom: 4px; } .feature-empty-enhanced .empty-description { font-size: var(--font-sm); color: var(--color-text-tertiary); margin-bottom: 16px; } .settings-input-sm { max-width: 100px; width: 100%; } .settings-hint { padding: var(--space-2); font-size: var(--font-xs); color: var(--color-text-tertiary); }     .cd-file-picker { width: min(700px, 95vw); max-height: 80vh; display: flex; flex-direction: column; } .cd-trash { width: min(600px, 92vw); max-height: 80vh; overflow-y: auto; } .cd-move { width: min(420px, 90vw); } .cd-extract { max-width: 440px; } .cd-saveas2 { max-width: 520px; }   .cd-section { margin-bottom: 12px; } .cd-section-8 { margin-bottom: 8px; } .cd-mt-8 { margin-top: 8px; } .cd-mt-12 { margin-top: 12px; } .cd-field-value { font-size: var(--font-sm); } .cd-field-value-flex { font-size: var(--font-sm); flex: 1; }   .cd-list-bordered { max-height: 150px; overflow: auto; border: 1px solid var(--color-border-default); border-radius: 4px; }   .cd-split-pane { display: flex; gap: 8px; flex: 1; overflow: hidden; min-height: 200px; } .cd-split-left { width: 180px; border: 1px solid var(--color-border-default); border-radius: 4px; overflow: auto; padding: 4px; flex-shrink: 0; } .cd-split-right { flex: 1; border: 1px solid var(--color-border-default); border-radius: 4px; overflow: auto; padding: 4px; }   .cd-item-row { padding: 4px 8px; cursor: pointer; } .cd-item-row:hover { background: var(--color-bg-sunken); } .cd-file-row { padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 3px; } .cd-file-row.selected { background: var(--color-success-surface); } .cd-file-row:hover { background: var(--color-bg-sunken); } .cd-folder-row { padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; } .cd-folder-row:hover { background: var(--color-bg-sunken); }   .cd-text-muted { color: var(--color-text-tertiary); font-size: var(--font-sm); } .cd-text-hint { font-size: var(--font-xs); color: var(--color-text-tertiary); } .cd-text-hint-ml { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-left: 8px; } .cd-text-empty { padding: 12px; color: var(--color-text-tertiary); }   .cd-selected-project { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .cd-selected-project-name { font-weight: var(--weight-semibold); }   .cd-selection-count { margin-top: 8px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .cd-msg-error { color: var(--color-error); font-size: var(--font-sm); margin-bottom: 8px; }   .cd-trash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .cd-trash-header h3 { margin-bottom: 0; }   .cabinet-btn-danger { color: var(--color-error); border-color: var(--color-error); }   .cd-section-heading { margin: 12px 0 8px; }   .cd-node-count { color: var(--color-text-tertiary); font-size: var(--font-xs); }   .flex-shrink-0 { flex-shrink: 0; } .cd-text-sm-semi-dark { font-size: var(--font-sm); color: var(--color-text-secondary); }   .msg-bookmark-info { display: flex; align-items: center; gap: 4px; margin-top: 2px; }   .cd-pre-wrap { white-space: pre-wrap; } .cd-w-full { width: 100%; } .cd-hidden { display: none; } .cd-flex-row { display: flex; gap: 8px; align-items: center; } .cd-flex-gap-6 { display: flex; gap: 6px; margin-top: 4px; } .cd-flex-gap-12 { display: flex; gap: 12px; margin: 4px 0; } .cd-modal-520 { width: 520px; } .cd-modal-640 { max-width: 640px; } .cd-candidate-list-mt { margin-top: 4px; } .cd-email-hint { color: var(--color-text-secondary); font-size: 12px; margin-left: 8px; } .cd-field-mt-6 { margin-top: 6px; } 
/*css/screens/18-ux-common.css*/
 @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { }   .home-setup-guide { display: flex; align-items: flex-start; gap: 14px; margin: 16px 24px 0; padding: 16px 20px; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%); border: 1px solid #a7f3d0; border-radius: var(--radius-lg); position: relative; animation: setup-guide-in var(--duration-slow) ease; } @keyframes setup-guide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .setup-guide-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .setup-guide-icon svg { width: 22px; height: 22px; } .setup-guide-content { flex: 1; } .setup-guide-title { font-size: var(--font-md); font-weight: var(--weight-bold); color: #065f46; margin-bottom: 4px; } .setup-guide-desc { font-size: var(--font-xs); color: #047857; margin-bottom: 10px; line-height: 1.5; } .setup-guide-steps { display: flex; flex-direction: column; gap: 8px; } .setup-step { display: flex; align-items: center; gap: 10px; font-size: var(--font-sm); color: #065f46; font-weight: var(--weight-medium); } .setup-step-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .setup-step-check svg { width: 14px; height: 14px; } .setup-step-number { font-size: 12px; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .setup-guide-dismiss { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; background: transparent; color: #6ee7b7; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--duration-fast); } .setup-guide-dismiss:hover { background: rgba(0, 0, 0, 0.08); color: #065f46; } .setup-guide-dismiss:hover { background: rgba(0, 0, 0, 0.05); color: #065f46; } .setup-guide-dismiss svg { width: 16px; height: 16px; }   .toast-container { position: fixed; top: 16px; right: 16px; z-index: var(--z-skip); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; min-width: 300px; max-width: 440px; background: var(--color-bg-base); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08); pointer-events: auto; animation: toast-in 0.35s var(--ease-spring); position: relative; overflow: hidden; }   .toast-undo { margin-left: auto; flex: 0 0 auto; align-self: center; white-space: nowrap; padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-elevated); color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; } .toast-undo:hover { background: var(--color-primary-surface); border-color: var(--color-primary); }   .toast-compact { display: flex; align-items: center; align-self: flex-end;   min-height: 36px; min-width: 180px; max-width: 320px; padding: 0 6px 0 14px; border-radius: 18px; background: var(--color-success); color: var(--color-text-on-primary); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12); pointer-events: auto; animation: toast-in 0.35s var(--ease-spring); } .toast-compact-error { background: var(--color-error); } .toast-compact-warning { background: var(--color-warning); } .toast-compact-info { background: var(--color-info); } .toast-compact-icon { flex-shrink: 0; margin-right: 8px; } .toast-compact-message { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; padding: 6px 0; overflow-wrap: anywhere; font-size: var(--font-sm); font-weight: var(--weight-semibold); } .toast-compact-cta { flex-shrink: 0; margin: 0 2px; padding: 3px 8px; border: none; border-radius: 10px; background: transparent; color: inherit; opacity: 0.9; font-size: var(--font-xs); text-decoration: underline; cursor: pointer; } .toast-compact-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 2px; border: none; border-radius: 12px; background: transparent; color: inherit; opacity: 0.8; cursor: pointer; } .toast-compact-cta:hover, .toast-compact-close:hover { background: var(--color-overlay-white-20); } .toast-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--color-text-tertiary); transform-origin: left; animation: toast-progress 3.5s linear forwards; } @keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .toast-exit { animation: toast-out var(--duration-slow) ease forwards; } .toast-exit::after { animation: none; transform: scaleX(0); } @keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(40px) scale(0.95); } } .toast-success::after { background: var(--color-success); } .toast-error::after { background: var(--color-error); } .toast-info::after { background: var(--color-feature-message); } .toast-warning::after { background: var(--color-warning); } .toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; } .toast-icon svg { width: 20px; height: 20px; } .toast-success .toast-icon { color: var(--color-success); } .toast-error .toast-icon { color: var(--color-error); } .toast-info .toast-icon { color: var(--color-feature-message); } .toast-warning .toast-icon { color: var(--color-warning); } .toast-message { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); flex: 1; line-height: 1.5; padding: 1px 0; } .toast-close { width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; margin-top: 1px; transition: all var(--duration-fast); } .toast-close:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .toast-close svg { width: 14px; height: 14px; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .toast-container { top: auto; bottom: 70px; right: 12px; left: 12px; } .toast-item { min-width: unset; max-width: unset; } }   .nav-badge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 9999px; background: var(--color-error); color: white; font-size: 10px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; padding: 0 5px; line-height: 1; animation: badge-pop var(--duration-slow) var(--ease-spring); box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4); } @keyframes badge-pop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes empty-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }   .feature-page { animation: page-enter var(--duration-normal) ease; } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }   .home-card:active{ transform: translateY(0) scale(0.98); transition-duration: var(--duration-instant); }   button, [role="button"], [role="menuitem"], [role="tab"], summary, label, .nav-link, .folder-item, .message-item, .bottom-nav-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }   button input, label input, label textarea, [role="button"] input, [role="button"] textarea { -webkit-user-select: text; user-select: text; }   .btn-primary:focus-visible,.btn-secondary:focus-visible,.nav-link:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; }   .home-dashboard { scroll-behavior: smooth; }   .home-header-greeting { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }   .login-card { animation: login-appear var(--duration-slow) var(--ease-spring); } @keyframes login-appear { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }     @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .nav-link::after { display: none; } .sidebar.mobile-open .nav-link::after { display: none; } }   .confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-skip); display: flex; align-items: center; justify-content: center; animation: confirm-bg-in var(--duration-normal) ease; } @keyframes confirm-bg-in { from { opacity: 0; } to { opacity: 1; } } .confirm-dialog { background: var(--color-bg-base); border-radius: var(--radius-xl); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); padding: 28px 32px 24px; max-width: 400px; width: 90%; text-align: center; animation: confirm-in var(--duration-normal) var(--ease-spring); } @keyframes confirm-in { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .confirm-icon-area { margin-bottom: 16px; } .confirm-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .confirm-icon svg { width: 26px; height: 26px; } .confirm-icon-danger { background: var(--color-error-surface); color: var(--color-error); } .confirm-icon-info { background: var(--color-info-surface); color: var(--color-info); } .confirm-icon-warning { background: var(--color-warning-surface); color: var(--color-warning); } .confirm-title { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-secondary); margin-bottom: 8px; } .confirm-desc { font-size: var(--font-sm); color: var(--color-text-tertiary); line-height: 1.6; margin-bottom: 24px;   white-space: pre-line;   text-align: left; }   .confirm-input { width: 100%; box-sizing: border-box; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); 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); } .confirm-actions { display: flex; gap: 10px; justify-content: center; } .confirm-cancel, .confirm-ok { padding: 8px 20px; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-fast); border: none; } .confirm-cancel { background: var(--color-border-default); color: var(--color-text-secondary); } .confirm-cancel:hover { background: var(--color-border-muted); } .confirm-ok.btn-danger { background: var(--color-error); color: white; } .confirm-ok.btn-danger:hover { background: #b71c1c; } .confirm-ok.btn-primary { background: var(--color-primary); color: white; } .confirm-ok.btn-primary:hover { background: var(--color-primary-dark); }   .shortcuts-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-skip); display: flex; align-items: center; justify-content: center; animation: confirm-bg-in var(--duration-normal) ease; } .shortcuts-dialog { background: var(--color-bg-base); border-radius: var(--radius-xl); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); max-width: 480px; width: 90%; animation: confirm-in var(--duration-normal) var(--ease-spring); overflow: hidden; } .shortcuts-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border-default); } .shortcuts-header h3 { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .shortcuts-close { width: 28px; height: 28px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--duration-fast); } .shortcuts-close:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .shortcuts-close svg { width: 18px; height: 18px; } .shortcuts-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; } .shortcuts-group h4 { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .shortcut-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: var(--font-sm); color: var(--color-text-secondary); } .shortcut-row span { margin-left: auto; color: var(--color-text-tertiary); } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); font-family: inherit; box-shadow: 0 1px 0 var(--color-border-muted); } .shortcuts-footer { padding: 12px 20px; border-top: 1px solid var(--color-border-default); text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .global-search-wrap { position: relative; margin-left: auto; margin-right: 12px; } .global-search-input-wrap { display: flex; align-items: center; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 0 12px; gap: 8px; transition: all var(--duration-normal); width: 280px; } .global-search-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.12); background: var(--color-bg-base); width: 360px; } .global-search-icon { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; } .global-search-input { border: none; background: transparent; outline: none; font-size: var(--font-sm); color: var(--color-text-secondary); padding: 7px 0; flex: 1; min-width: 0; } .global-search-input::placeholder { color: var(--color-border-muted); } .global-search-clear { width: 18px; height: 18px; border: none; background: var(--color-border-muted); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; transition: background var(--duration-fast); } .global-search-clear:hover { background: var(--color-text-tertiary); } .global-search-clear svg { width: 12px; height: 12px; } .global-search-hint { flex-shrink: 0; opacity: 0.5; font-size: 10px; box-shadow: none; } .global-search-overlay { position: fixed; inset: 0; z-index: 99; } .global-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--color-bg-base); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); border: 1px solid var(--color-border-default); overflow: hidden; z-index: var(--z-sticky); animation: search-results-in var(--duration-fast) ease; } @keyframes search-results-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .search-result-group { padding: 8px; border-bottom: 1px solid var(--color-border-default); } .search-result-group:last-child { border-bottom: none; } .search-result-label { font-size: 10px; font-weight: var(--weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 8px; display: block; margin-bottom: 4px; } .search-result-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; transition: background var(--duration-fast); text-decoration: none; } .search-result-link:hover { background: var(--color-bg-sunken); color: var(--color-primary-on-surface); }   .search-preview-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) ease; text-decoration: none; } .search-preview-item:hover { background: var(--color-primary-surface-light, var(--color-bg-sunken)); } .search-preview-sender { font-size: 12px; font-weight: 600; color: var(--color-text-primary); } .search-preview-subject { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-preview-time { font-size: 11px; color: var(--color-text-tertiary); } .search-preview-meta { font-size: 11px; color: var(--color-text-tertiary); } .search-result-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-tertiary); } .search-result-link:hover .search-result-icon { color: var(--color-primary-on-surface); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .global-search-wrap { display: none; } } @media (max-width: 1024px) { .global-search-input-wrap { width: 200px; } .global-search-input-wrap:focus-within { width: 260px; } }   .error-boundary { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; animation: empty-fade-in var(--duration-slow) ease; } .error-boundary-content { text-align: center; max-width: 400px; } .error-boundary-icon { margin-bottom: 16px; } .error-boundary-icon svg { width: 64px; height: 64px; color: var(--color-border-muted); } .error-boundary-content h3 { font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--color-text-secondary); margin-bottom: 8px; } .error-boundary-content p { font-size: var(--font-sm); color: var(--color-text-tertiary); line-height: 1.6; margin-bottom: 20px; } .error-boundary-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; } .error-boundary-actions .btn-primary, .error-boundary-actions .btn-secondary { padding: 8px 20px; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .error-boundary-details { text-align: left; font-size: var(--font-xs); color: var(--color-text-tertiary); } .error-boundary-details summary { cursor: pointer; color: var(--color-text-disabled); margin-bottom: 6px; } .error-boundary-details pre { background: var(--color-bg-sunken); padding: 10px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 11px; line-height: 1.4; max-height: 120px; } .activity-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast); position: relative; } .activity-item:hover { background: var(--color-bg-sunken); } .activity-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: var(--weight-semibold); color: white; color: var(--color-text-secondary); } .activity-time { font-size: 10px; color: var(--color-text-disabled); margin-left: auto; flex-shrink: 0; } .activity-time { font-size: 10px; color: var(--color-text-disabled); } .upload-progress-bar { height: 4px; background: var(--color-border-default); border-radius: 2px; overflow: hidden; width: 100%; }   .settings-field-help { font-size: 11px; color: var(--color-text-disabled); line-height: 1.5; margin-bottom: 10px; padding: 6px 10px; background: var(--color-bg-sunken); border-radius: var(--radius-sm); border-left: 3px solid var(--color-border-muted); }   .feature-empty { text-align: center; padding: 40px 20px; color: var(--color-text-tertiary); font-size: var(--font-sm); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { }   .offline-banner { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: linear-gradient(90deg, #fef3c7, #fde68a); color: #92400e; font-size: var(--font-sm); font-weight: var(--weight-medium); animation: offline-slide var(--duration-slow) ease; }   .offline-banner.is-auto-dismissed { display: none; } @keyframes offline-slide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .topbar-status-dot.offline { background: var(--color-error) !important; animation: none !important; }   .sc-overlay-rich-head { display: flex; align-items: flex-start; gap: 10px; padding: 22px 28px 20px;   border-radius: var(--radius-xl) var(--radius-xl) 0 0;   } .sc-overlay-rich-head--green { background: linear-gradient(to bottom right, var(--color-primary) 0%, var(--color-overlay-head-green-mid) 50%, var(--color-overlay-head-green-end) 100%); } .sc-overlay-rich-head--blue { background: linear-gradient(to bottom right, var(--color-overlay-head-blue-start) 0%, var(--color-overlay-head-blue-mid) 50%, var(--color-overlay-head-blue-end) 100%); } .sc-overlay-rich-icon { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-overlay-white-20); color: var(--color-white); font-size: var(--font-md); } .sc-overlay-rich-text { flex: 1 1 auto; min-width: 0; } .sc-overlay-rich-title { display: block; color: var(--color-white); font-size: var(--font-lg); font-weight: var(--weight-bold); line-height: 28px;   } .sc-overlay-rich-sub { display: block; margin-top: 6px; color: var(--color-overlay-white-70); font-size: var(--font-xs); white-space: normal; } .sc-overlay-rich-close { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: var(--color-overlay-white-15); color: var(--color-white); font-size: var(--font-lg); font-weight: var(--weight-light); line-height: 1; cursor: pointer; } .sc-overlay-rich-close:hover { background: var(--color-overlay-white-25); } .sc-overlay-rich-close:active { background: var(--color-overlay-white-40); } 
/*css/screens/19-mobile-table.css*/
  @media (max-width: 640px) { .home-member-table thead { display: none; } .home-member-table tbody tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--color-border-default); align-items: center; } .home-member-table tbody td { padding: 0; border: none; } .home-member-table tbody td:first-child { flex-shrink: 0; } .home-member-table tbody td:nth-child(2) { font-weight: var(--weight-semibold); font-size: var(--font-sm); } .home-member-table tbody td:nth-child(3) { font-size: var(--font-xs); color: var(--color-text-tertiary); width: 100%; } .home-member-table tbody td:nth-child(4), .home-member-table tbody td:nth-child(5) { font-size: var(--font-xs); } .member-actions-cell { width: 100%; display: flex; gap: 6px; margin-top: 6px; } .feature-table-wrap { overflow-x: visible; } .feature-table thead { display: none; } .feature-table tbody tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 8px; border-bottom: 1px solid var(--color-border-default); } .feature-table tbody td { padding: 2px 0; border: none; font-size: var(--font-xs); } }       a,button,.nav-link,.message-item,.folder-item,.bottom-nav-item{ transition: all var(--duration-normal) var(--ease-spring); }   button:active:not(:disabled),.btn-primary:active,.btn-green:active{ transform: scale(0.96) !important; transition-duration: var(--duration-instant) !important; }   :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }   .message-item { transition: background var(--duration-fast) ease, transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) ease; }   .message-item:hover { z-index: 1; } .message-item:active { transform: scale(0.995); transition-duration: var(--duration-instant); }     .nav-badge { animation: badge-pop var(--duration-slow) var(--ease-spring); }   @keyframes shimmer-wave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-line,.skeleton-avatar,.skeleton-body{ background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-bg-sunken) 37%, var(--color-border-default) 63%) !important; background-size: 200% 100% !important; animation: shimmer-wave 1.8s ease-in-out infinite !important; border-radius: var(--radius-sm); }   .confirm-overlay, .modal-overlay, .cabinet-dialog-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(26, 26, 46, 0.4) !important; } .confirm-dialog, .cabinet-dialog { box-shadow: 0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08) !important; border: 1px solid rgba(255,255,255,0.6); }   .mobile-bottom-nav { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,0.88) !important; border-top: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.06); } .bottom-nav-item { transition: all var(--duration-normal) var(--ease-spring); } .bottom-nav-item:active { transform: scale(0.9); } .bottom-nav-item.active svg { filter: drop-shadow(0 2px 4px rgba(34, 187, 128, 0.3)); }   @keyframes stagger-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }   .folder-item { transition: all var(--duration-fast) var(--ease-spring); border-radius: var(--radius-md); } .folder-item:hover { background: rgba(34, 187, 128, 0.06); padding-left: calc(var(--space-3) + 2px); } .folder-item.active { background: linear-gradient(90deg, rgba(34, 187, 128, 0.12) 0%, transparent 100%); } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }   .global-search-input-wrap { transition: all var(--duration-slow) var(--ease-spring); } .global-search-input-wrap:focus-within { transform: scale(1.02); box-shadow: 0 4px 20px rgba(34, 187, 128, 0.15) !important; border-color: var(--color-primary) !important; background: var(--color-bg-base) !important; }   .global-search-results { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.95) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.06); } .search-result-link { transition: all var(--duration-fast) ease; border-radius: var(--radius-md); } .search-result-link:hover { background: var(--color-primary-surface-light) !important; transform: translateX(4px); } .login-card { box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04) !important; border: 1px solid rgba(255,255,255,0.8); }     .inbox-zero-pill { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 8px; background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); }   .inbox-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 120px 24px 0; color: var(--color-text-secondary); font-size: var(--font-sm); } .inbox-loading-spinner { width: 18px; height: 18px; border: 2px solid var(--color-primary-surface); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }     .message-list-panel::-webkit-scrollbar, .folder-panel::-webkit-scrollbar, .detail-panel::-webkit-scrollbar { width: 6px; } .message-list-panel::-webkit-scrollbar-track, .folder-panel::-webkit-scrollbar-track, .detail-panel::-webkit-scrollbar-track { background: transparent; } .message-list-panel::-webkit-scrollbar-thumb, .folder-panel::-webkit-scrollbar-thumb, .detail-panel::-webkit-scrollbar-thumb { background: var(--color-border-muted); border-radius: 3px; } .message-list-panel::-webkit-scrollbar-thumb:hover, .folder-panel::-webkit-scrollbar-thumb:hover, .detail-panel::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }   @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }   html.dark {   --color-reply-context-chip-surface: #2C3B33;   --color-feature-message-surface: #1A2A3A;     --color-google-brand: #8AB4F8; --color-google-brand-surface: #1E2A3A;   --color-ai-assist-accent: #CE93D8;   --color-ai-assist-surface: #3B2440;   --color-ai-assist-border: #8E5BA8;     --color-folder-front: #E4BE5E; --color-folder-back: #B98722; --color-folder-inbox-front: #6FA2D8; --color-folder-inbox-back: #3A6CAC; --color-folder-local-front: #5FBE98; --color-folder-local-back: #2A916A; --color-folder-message-front: #9E84D6; --color-folder-message-back: #6B4FB8; --color-feature-task-surface: #1A2E3A; --color-feature-timelog-surface: #1A2E2C; --color-feature-pin: #E0708C;   --color-feature-pin-surface: #3A1F28;     --color-feature-file-surface: #16332A;   --color-feature-pin-dark: #F0A0B4; --color-feature-message-dark: #3B7FD4; --color-feature-message-light: #8FC2FF; --color-feature-tracking-accent: #F2897E; --color-feature-tracking-surface: #232838;     --color-feature-timelog-dark: #0F766E; --color-feature-timelog-deep: #115E59; --color-overlay-white-40: #FFFFFF66; --color-overlay-white-14: #FFFFFF24; --color-tooltip-bg: #202030F0;   --color-tooltip-fg: #E4E4EE;   --color-overlay-white-22: #FFFFFF38; --color-overlay-black-08: #00000015;   --color-unrecorded: #E8A84C; --color-unrecorded-dark: #C87A30; --color-unrecorded-subtle: #D4A060; --color-unrecorded-surface: #2A1F12; --color-unrecorded-stripe: rgba(232, 168, 76, .333); --color-mail-receive: #3AC7D2; --color-mail-receive-dark: #2AA6B0; --color-mail-receive-surface: #12262A;   --color-bg-base: #1A1A2E; --color-bg-elevated: #252540; --color-bg-sunken: #12121E; --color-bg-deep: #12121E; --color-border-default: #2a2a3e; --color-border-muted: #3a3a50; --color-text-primary: #E8E8F0; --form-input-fg: var(--color-text-primary);     --color-text-primary-hover: #2A3A50; --color-text-primary-pressed: #1E2A3F; --color-tab-close-pressed: #D32F2F; --color-text-secondary: #A8A8C0; --color-text-tertiary: #9494AC;   --color-text-disabled: #4a4a5e; --color-sidebar-tool-label: #9494A8;   --color-primary-surface: #1A3A2E; --color-primary-on-surface: #7EE8C0;     --search-watermark-opacity: 1; --search-hint-fg: var(--color-text-tertiary); --color-primary-surface-light: #152E24; --color-primary-surface-muted: #244A3A;     --color-bulk-selected-surface: #28304A; --color-error-surface: #3A1A1A; --color-success-surface: #1A3A2E; --color-warning-surface: #3A2E1A; --color-warning-on-surface: #E8C06A;   --color-error-on-surface: #F0A5A5;   --color-info-surface: #1A2A3A;   --color-status-banner-accent-info: #5B82DE; --color-status-banner-icon-bg-error: #3A2228; --color-status-banner-icon-bg-warning: #3A3220; --color-status-banner-icon-bg-info: #222E4A; --color-status-banner-icon-fg-error: #F0797B; --color-status-banner-icon-fg-warning: #E8C06A; --color-status-banner-icon-fg-info: #8FAAE8;   --fb-dark-card-bg: #2A353B; --fb-dark-card-divider: #43525A; --fb-dark-card-input-bg: #1F292E; --fb-dark-card-input-border: #566970; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);   --color-avatar-palette-indigo: #818CF8; --color-avatar-palette-pink: #F472B6; --color-avatar-palette-amber: #FBBF24; --color-avatar-palette-emerald: #34D399; --color-avatar-palette-blue: #60A5FA; --color-avatar-palette-violet: #A78BFA; --color-avatar-palette-red: #F87171; --color-avatar-palette-teal: #2DD4BF; --color-avatar-palette-orange: #FB923C; --color-avatar-palette-cyan: #22D3EE; --color-badge-default-bg: #2A2A3E; --color-feature-contact-surface: #1A1A3A; --color-feature-phone: #A78BFA; --color-feature-tracking-surface: #232838; --color-track-cta: #63709E; --color-wakaba-green: #3DB861; --color-wakaba-yellow: #F5DB4C;   --color-aging-1-surface: var(--color-warning-surface); --color-aging-2-surface: var(--color-error-surface); --color-aging-2-text: #FB923C; --color-aging-3-text: #F87171; color-scheme: dark; } html.dark body { background: var(--color-bg-deep); color: var(--color-text-primary); } html.dark .app-layout { background: var(--color-bg-deep); } html.dark .sidebar { background: var(--color-bg-base) !important; border-right: 1px solid var(--color-border-default); } html.dark .app-topbar { background: linear-gradient(135deg, #1a6b4a 0%, #145a3c 100%); } html.dark .nav-header { background: var(--color-bg-elevated); border-bottom-color: var(--color-border-default); } html.dark .main-content { background: var(--color-bg-deep); }     html.dark .message-item:hover:not(.tone-bulk):not(.tone-overdue):not(.tone-sent) { background: var(--color-bg-elevated); }   html.dark .home-dashboard { background: var(--color-bg-deep); } html.dark .home-card { background: var(--color-bg-base); border-color: var(--color-border-default); } html.dark .talk-layout { background: var(--color-border-default); } html.dark .folder-panel, html.dark .message-list-panel, html.dark .detail-panel { background: var(--color-bg-base); } html.dark .login-card { background: var(--color-bg-sunken); border-color: var(--color-border-default); } html.dark {   --color-menu-bg-top: #282842; --color-menu-bg-bottom: #1E1E34; }   html.dark .avatar-menu { border-color: var(--color-border-default); } html.dark .mobile-bottom-nav {   background: color-mix(in srgb, var(--color-bg-base) 92%, transparent) !important; border-top-color: var(--color-border-default) !important; } html.dark .confirm-dialog, html.dark .cabinet-dialog { background: var(--color-bg-sunken) !important; border-color: var(--color-border-default) !important; } html.dark .global-search-input-wrap { background: var(--color-bg-elevated); border-color: var(--color-border-default); } html.dark .global-search-results { background: rgba(22, 22, 37, 0.96) !important; border-color: var(--color-border-default); } html.dark .nav-link:hover { background: rgba(34, 187, 128, 0.12); } html.dark .nav-link.active { background: linear-gradient(135deg, rgba(34, 187, 128, 0.15) 0%, rgba(34, 187, 128, 0.05) 100%); } html.dark .home-setup-guide{ background: linear-gradient(135deg, #1a2e25 0%, #1a2030 50%, #251a30 100%) !important; border-color: rgba(34, 187, 128, 0.2) !important; }   :where(html.dark) :where(input, textarea, select) { background: var(--color-bg-elevated);   border-color: var(--color-border-default); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--color-text-disabled); }   html.dark .message-list-panel::-webkit-scrollbar-thumb, html.dark .folder-panel::-webkit-scrollbar-thumb, html.dark .detail-panel::-webkit-scrollbar-thumb { background: var(--color-text-disabled); }   @keyframes welcome-pop { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 60% { opacity: 1; transform: scale(1.02) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .home-dashboard { }   .date-header { position: relative; text-align: center; padding: 12px 0 8px; color: var(--color-text-tertiary); font-size: var(--font-xs); font-weight: var(--weight-semibold); letter-spacing: 0.5px; } .date-header::before { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--color-border-default) 20%, var(--color-border-default) 80%, transparent 100%); } .date-header span { position: relative; background: var(--color-bg-base); padding: 2px 12px; border-radius: var(--radius-full); font-size: 11px; } html.dark .date-header span { background: var(--color-bg-base); }   @keyframes task-complete-check { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 50% { transform: scale(1.3) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }   @keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }     .contact-card { transition: all var(--duration-normal) var(--ease-spring) !important; position: relative; overflow: hidden; } .contact-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; border-color: var(--color-primary) !important; } .contact-card:active { transform: translateY(-1px) scale(0.98) !important; transition-duration: var(--duration-instant) !important; } .contact-action-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-default); background: var(--color-bg-base); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); transition: all var(--duration-fast) ease; } .contact-action-btn svg { width: 16px; height: 16px; } .contact-action-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); transform: scale(1.1); } .contact-avatar-initial, .contact-avatar-img { transition: transform var(--duration-slow) var(--ease-spring); } .contact-card:hover .contact-avatar-initial, .contact-card:hover .contact-avatar-img { transform: scale(1.08); }   .contact-list-item { transition: all var(--duration-normal) ease !important; border-radius: var(--radius-md); } .contact-list-item:hover { background: var(--color-primary-surface-light) !important; transform: translateX(4px); } @keyframes timer-active-glow { 0%, 100% { box-shadow: 0 0 20px rgba(34, 187, 128, 0.1); } 50% { box-shadow: 0 0 30px rgba(34, 187, 128, 0.25); } }   .file-row { transition: all var(--duration-normal) ease; } .file-row:hover { background: var(--color-primary-surface-light); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }   .file-actions { opacity: 0.3; transition: opacity var(--duration-normal) ease; } .file-row:hover .file-actions { opacity: 1; }   .feature-header h2 { position: relative;   display: inline-flex; align-items: center; gap: 8px; } .feature-header h2::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%); }   .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; box-shadow: 0 2px 8px rgba(34, 187, 128, 0.3); transition: all var(--duration-normal) var(--ease-spring) !important; } .btn-primary:hover { box-shadow: 0 4px 16px rgba(34, 187, 128, 0.4) !important; transform: translateY(-1px); }   @keyframes notify-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-3px) rotate(-1deg); } 30% { transform: translateX(3px) rotate(1deg); } 45% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }   input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(34, 187, 128, 0.12) !important; transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease; }   .login-feature-item svg { transition: all var(--duration-slow) var(--ease-spring); } .login-feature-item:hover svg { transform: scale(1.2) rotate(-5deg); color: var(--color-primary-on-surface); }   @keyframes avatar-menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .avatar-menu { animation: avatar-menu-in var(--duration-normal) var(--ease-spring) !important; } .avatar-menu-item { transition: all var(--duration-fast) ease !important; border-radius: var(--radius-sm); } .avatar-menu-item:hover { background: var(--color-primary-surface-light) !important; transform: translateX(4px); }   .todo-stats .stat-card { transition: all var(--duration-normal) var(--ease-spring); } .todo-stats .stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }   .compose-area { background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-elevated) 100%); } .compose-toolbar { border-top: 1px solid var(--color-border-default); } .compose-send-btn { transition: all var(--duration-normal) var(--ease-spring) !important; } .compose-send-btn:hover { transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(34, 187, 128, 0.3) !important; }   @keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }   .main-content > * { animation: page-fade-in var(--duration-slow) ease both; } @keyframes page-fade-in-smooth { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .message-item { position: relative; overflow: hidden; } .message-item::after { content: ''; position: absolute; right: -40px; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, transparent 0%, var(--color-primary) 100%); opacity: 0; transition: opacity var(--duration-slow) ease, right var(--duration-slow) ease; } .message-item:active::after { opacity: 0.15; right: 0; }   .btn-primary, .btn-green, .btn-secondary { min-height: 44px; font-size: var(--font-md); }   .timer-panel { flex-direction: column; text-align: center; } .timer-time { font-size: 48px !important; } .btn-clock-circle { width: 88px !important; height: 88px !important; } .clock-circle-icon { font-size: 24px !important; } } html.dark .contact-card { background: var(--color-bg-base); border-color: var(--color-border-default); } html.dark .contact-action-btn { background: var(--color-bg-elevated); border-color: var(--color-border-default); color: var(--color-text-secondary); } html.dark .feature-header h2::after { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%); } html.dark .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; } html.dark .file-row:hover { background: var(--color-primary-surface); } html.dark .compose-area { background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-elevated) 100%); }     .not-found-page { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 24px; } .not-found-content { text-align: center; animation: stagger-fade-up 0.6s var(--ease-spring) both; } .not-found-icon { margin-bottom: 16px; } .not-found-icon svg { width: 80px; height: 80px; color: var(--color-primary-muted); filter: drop-shadow(0 4px 12px rgba(34, 187, 128, 0.2)); animation: gentle-float 4s ease-in-out infinite; } .not-found-content h2 { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: 8px; } .not-found-content p { font-size: var(--font-md); color: var(--color-text-tertiary); margin-bottom: 20px; }   @keyframes hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 187, 128, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(34, 187, 128, 0); } }       @keyframes count-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }   @keyframes ptr-spin { to { transform: rotate(360deg); } } .pull-to-refresh { display: none; text-align: center; padding: 8px; color: var(--color-text-tertiary); font-size: var(--font-xs); } .pull-to-refresh.active { display: block; } .pull-to-refresh svg { width: 20px; height: 20px; animation: ptr-spin 1s linear infinite; }   @keyframes spotlight-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 187, 128, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(34, 187, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 187, 128, 0); } }   .breadcrumb { display: flex; align-items: center; gap: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); padding: 8px 0; } .breadcrumb a { color: var(--color-primary-on-surface); text-decoration: none; transition: color var(--duration-fast) ease; } .breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }   @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .confetti-piece { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: confetti-fall 3s ease-in forwards; }   .compose-suggestion { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--color-primary-surface-light); border: 1px solid rgba(34, 187, 128, 0.2); border-radius: var(--radius-full); font-size: 11px; color: var(--color-primary-on-surface); cursor: pointer; transition: all var(--duration-fast) ease; } .compose-suggestion:hover { background: var(--color-primary-surface); transform: translateY(-1px); }   @keyframes progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }   html.dark .not-found-content h2 { color: var(--color-text-primary); } html.dark .not-found-content p { color: var(--color-text-secondary); } html.dark .compose-suggestion { background: #1a2e25; border-color: rgba(34, 187, 128, 0.2); }     .message-item { position: relative; overflow: hidden; } .message-item.swipe-right-hint::before { content: 'Read'; position: absolute; left: 0; top: 0; bottom: 0; width: 80px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: white; font-size: 12px; font-weight: var(--weight-semibold); z-index: 0; opacity: 1; } .message-item.swipe-left-hint::after { content: 'Bookmark'; position: absolute; right: 0; top: 0; bottom: 0; width: 80px; display: flex; align-items: center; justify-content: center; background: #F59E0B; color: white; font-size: 12px; font-weight: var(--weight-semibold); z-index: 0; opacity: 1; }   .topbar-status-dot { position: relative; } .topbar-status-dot::after { content: ''; position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 50%; background: var(--color-primary); opacity: 0; animation: health-pulse 3s ease-in-out infinite; } .topbar-status-dot.offline::after { background: #EF4444; animation: health-pulse 1.5s ease-in-out infinite; } @keyframes health-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.8); } }   .shortcuts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: var(--z-skip); display: flex; align-items: center; justify-content: center; animation: fade-in var(--duration-fast) ease; } .shortcuts-dialog { background: white; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); max-width: 560px; width: 90%; max-height: 80vh; overflow: hidden; animation: sheet-up var(--duration-normal) var(--ease-spring); } @keyframes sheet-up { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .shortcuts-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--color-bg-sunken); } .shortcuts-header h3 { margin: 0; font-size: 18px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .shortcuts-close { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; color: var(--color-text-disabled); transition: all var(--duration-fast); } .shortcuts-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .shortcuts-close svg { width: 20px; height: 20px; } .shortcuts-body { padding: 16px 24px; overflow-y: auto; max-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .shortcuts-group h4 { margin: 0 0 10px; font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); } .shortcut-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13px; color: #444; } .shortcut-row span:last-child { margin-left: auto; color: var(--color-text-disabled); font-size: 12px; } .shortcut-row kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 11px; font-weight: var(--weight-semibold); color: #555; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .shortcuts-footer { padding: 12px 24px; border-top: 1px solid var(--color-bg-sunken); text-align: center; font-size: 12px; color: var(--color-text-tertiary); } .gesture-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--color-primary-surface-light); border-radius: 6px; font-size: 14px; color: var(--color-primary-on-surface); font-weight: bold; } @keyframes draft-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }   .page-enter { opacity: 0; transform: translateY(8px); } .page-enter-active { opacity: 1; transform: translateY(0); transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease; }   .nav-badge, .msg-alert-badge, .bottom-nav-badge { transition: transform var(--duration-slow) var(--ease-spring), background-color var(--duration-slow); } @keyframes badge-pop { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes read-fade { from { background-color: rgba(34, 187, 128, 0.08); } to { background-color: transparent; } }   @keyframes slide-in-left { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }     @media (max-width: 600px) { .shortcuts-body { grid-template-columns: 1fr; } .shortcuts-dialog { width: 95%; max-height: 90vh; } }   html.dark .shortcuts-dialog { background: var(--color-bg-elevated); } html.dark .shortcuts-header { border-color: var(--color-border-default); } html.dark .shortcuts-header h3 { color: var(--color-text-secondary); } html.dark .shortcuts-close:hover { background: var(--color-border-default); } html.dark .shortcut-row { color: var(--color-text-secondary); } html.dark .shortcut-row span:last-child { color: #aaa; } html.dark .shortcut-row kbd { background: var(--color-border-default); border-color: var(--color-border-muted); color: var(--color-text-secondary); } html.dark .shortcuts-footer { border-color: var(--color-border-default); color: var(--color-text-disabled); } html.dark .shortcuts-group h4 { color: #777; } html.dark .gesture-icon { background: #1a2e25; } html.dark .message-item.swipe-right-hint::before { background: var(--color-primary); } html.dark .message-item.swipe-left-hint::after { background: #D97706; }       .notification-center { position: relative; } .btn-notification-bell { position: relative; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--color-text-disabled); transition: all var(--duration-fast); } .btn-notification-bell:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .btn-notification-bell svg { width: 20px; height: 20px; } .btn-notification-bell.has-new svg { animation: bell-ring var(--duration-slow) ease; } @keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(15deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } } .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: #EF4444; color: white; font-size: 10px; font-weight: var(--weight-bold); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .notif-overlay { position: fixed; inset: 0; z-index: 999; } .notif-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-height: 480px; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); z-index: var(--z-skip); overflow: hidden; animation: notif-slide var(--duration-normal) ease; } @keyframes notif-slide { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--color-bg-sunken); } .notif-header h4 { margin: 0; font-size: 15px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .notif-mark-all { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); padding: 4px 8px; border-radius: 6px; transition: background var(--duration-fast); }   .notif-close, .toast-center-close { margin-left: auto; min-width: 44px; min-height: 44px; border: none; background: transparent; color: var(--color-text-secondary); font-size: var(--font-lg); line-height: 1; cursor: pointer; border-radius: var(--radius-sm); } .notif-close:hover, .toast-center-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .notif-mark-all:hover { background: #f0fdf4; } .notif-list { overflow-y: auto; max-height: 400px; } .notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--color-text-tertiary); font-size: 13px; } .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; cursor: pointer; transition: background var(--duration-fast); position: relative; } .notif-item:hover { background: #f9fafb; } .notif-item.notif-unread { background: #f0fdf4; } .notif-item-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notif-item-icon svg { width: 18px; height: 18px; } .notif-type-message { background: #e0f2fe; color: #0284c7; } .notif-type-message svg { stroke: #0284c7; } .notif-type-file { background: #fef3c7; color: #D97706; } .notif-type-file svg { stroke: #D97706; } .notif-type-task { background: #e0f2fe; color: #0891b2; } .notif-type-task svg { stroke: #0891b2; } .notif-type-task-overdue { background: var(--color-error-surface); color: var(--color-error); } .notif-type-task-overdue svg { stroke: var(--color-error); } .notif-type-shipping { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .notif-type-shipping svg { stroke: var(--color-feature-tracking); } .notif-item-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .notif-item-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-desc { font-size: 12px; color: var(--color-text-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-time { font-size: 11px; color: var(--color-text-tertiary); } .notif-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 6px; }   .fab-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); } .fab-main { width: 56px; height: 56px; border-radius: 16px; border: none; background: linear-gradient(135deg, var(--color-primary), #1a9d6c); color: white; cursor: pointer; box-shadow: 0 4px 16px rgba(34, 187, 128, 0.3); display: flex; align-items: center; justify-content: center; transition: all var(--duration-slow) var(--ease-spring); } .fab-main:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(34, 187, 128, 0.4); } .fab-main.fab-active { transform: rotate(45deg); border-radius: 50%; background: #555; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .fab-icon { width: 24px; height: 24px; transition: transform var(--duration-slow); } .fab-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: -1; animation: fade-in var(--duration-fast) ease; } .fab-menu { position: absolute; bottom: 68px; right: 0; display: flex; flex-direction: column; gap: 8px; animation: fab-menu-in var(--duration-normal) var(--ease-spring); } @keyframes fab-menu-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .fab-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: white; border: none; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-primary); white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: all var(--duration-fast); } .fab-menu-item:hover { background: #f0fdf4; transform: translateX(-4px); } .fab-menu-item svg { width: 20px; height: 20px; stroke: var(--color-primary); }   .tool-palette { position: fixed; bottom: 84px; right: 24px; z-index: var(--z-toast); } .tool-palette-trigger { width: 48px; height: 48px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--color-primary), #1a9d6c); color: white; cursor: pointer; box-shadow: 0 4px 16px rgba(34, 187, 128, 0.3); display: flex; align-items: center; justify-content: center; transition: all var(--duration-slow) var(--ease-spring); } .tool-palette-trigger:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(34, 187, 128, 0.4); } .tool-palette-trigger.tool-palette-active { background: var(--color-text-secondary); box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .tool-palette-icon { width: 22px; height: 22px; transition: transform var(--duration-normal); } .tool-palette-active .tool-palette-icon { transform: rotate(90deg); } .tool-palette-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.12); z-index: -1; animation: fade-in var(--duration-fast) ease; } .tool-palette-menu { position: absolute; bottom: 60px; right: 0; display: flex; flex-direction: column; gap: 6px; animation: tool-palette-in var(--duration-normal) var(--ease-spring); } @keyframes tool-palette-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .tool-palette-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: white; border: none; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-primary); white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: all var(--duration-fast); } .tool-palette-item:hover { transform: translateX(-4px); color: white; } .tool-palette-item svg { width: 20px; height: 20px; flex-shrink: 0; }   .tool-palette-item:nth-child(1) { background: #EEF2FF; } .tool-palette-item:nth-child(1) svg { stroke: #6366F1; } .tool-palette-item:nth-child(1):hover { background: #6366F1; } .tool-palette-item:nth-child(1):hover svg { stroke: white; } .tool-palette-item:nth-child(2) { background: #FFF7ED; } .tool-palette-item:nth-child(2) svg { stroke: #D97706; } .tool-palette-item:nth-child(2):hover { background: #D97706; } .tool-palette-item:nth-child(2):hover svg { stroke: white; } .tool-palette-item:nth-child(3) { background: #ECFEFF; } .tool-palette-item:nth-child(3) svg { stroke: #0891B2; } .tool-palette-item:nth-child(3):hover { background: #0891B2; } .tool-palette-item:nth-child(3):hover svg { stroke: white; } .tool-palette-item:nth-child(4) { background: var(--color-feature-tracking-surface); } .tool-palette-item:nth-child(4) svg { stroke: var(--color-feature-tracking); } .tool-palette-item:nth-child(4):hover { background: var(--color-feature-tracking); } .tool-palette-item:nth-child(4):hover svg { stroke: white; } .tool-palette-item:nth-child(5) { background: #FBF5EF; } .tool-palette-item:nth-child(5) svg { stroke: #B8805A; } .tool-palette-item:nth-child(5):hover { background: #B8805A; } .tool-palette-item:nth-child(5):hover svg { stroke: white; } html.dark .tool-palette-trigger.tool-palette-active { background: #444; } html.dark .tool-palette-item { color: var(--color-text-secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } html.dark .tool-palette-item:nth-child(1) { background: #1e1b4b; } html.dark .tool-palette-item:nth-child(2) { background: #451a03; } html.dark .tool-palette-item:nth-child(3) { background: #083344; } html.dark .tool-palette-item:nth-child(4) { background: #2e1065; } html.dark .tool-palette-item:nth-child(5) { background: #3b2818; } @media (max-width: 767px) { .tool-palette { bottom: 136px; right: 16px; } .tool-palette-trigger { width: 44px; height: 44px; } }   .activity-item { position: relative; } .activity-item::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: -12px; width: 2px; background: var(--color-bg-sunken); } .activity-item:last-child::before { display: none; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .fab-container { bottom: 80px; right: 16px; } .fab-main { width: 48px; height: 48px; border-radius: 14px; } .notif-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: 80px; width: auto; max-height: 60vh; border-radius: 16px; } }   html.dark .btn-notification-bell { color: #aaa; } html.dark .btn-notification-bell:hover { background: var(--color-border-default); color: var(--color-text-secondary); } html.dark .notif-panel { background: var(--color-bg-elevated); box-shadow: 0 10px 40px rgba(0,0,0,0.3); } html.dark .notif-header { border-color: var(--color-border-default); } html.dark .notif-header h4 { color: var(--color-text-secondary); } html.dark .notif-item:hover { background: #1e1e32; } html.dark .notif-item.notif-unread { background: #142418; } html.dark .notif-item-title { color: var(--color-text-secondary); } html.dark .notif-item-desc { color: var(--color-text-tertiary); } html.dark .notif-empty { color: var(--color-text-disabled); } html.dark .fab-menu-item { background: var(--color-bg-elevated); color: var(--color-text-secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } html.dark .fab-menu-item:hover { background: #142418; } html.dark .activity-item::before { background: var(--color-border-default); }     .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 14px 10px 4px; margin-top: 2px; font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-tertiary); transition: color var(--duration-fast); } .nav-group-toggle:hover { color: var(--color-text-disabled); } .nav-group-chevron { width: 12px; height: 12px; transition: transform var(--duration-normal) ease; } .nav-group-toggle.collapsed .nav-group-chevron { transform: rotate(-90deg); } .nav-group-items { display: flex; flex-direction: column; overflow: hidden; max-height: 500px; transition: max-height var(--duration-slow) ease, opacity var(--duration-normal) ease; opacity: 1; } .nav-group-items.nav-collapsed { max-height: 0; opacity: 0; margin: 0; }   .font-size-adjuster { display: flex; flex-direction: column; gap: 4px; } .font-size-label { font-size: 11px; color: var(--color-text-tertiary); font-weight: var(--weight-semibold); } .font-size-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; } .font-size-btn { padding: 4px 0; border: 1px solid var(--color-border-default); background: transparent; cursor: pointer; font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); transition: all var(--duration-fast); } .font-size-btn-left { border-radius: 4px 0 0 4px; } .font-size-btn-center { border-left: none; border-right: none; } .font-size-btn-right { border-radius: 0 4px 4px 0; } .font-size-btn:hover { color: var(--color-primary-on-surface); } .font-size-btn.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); border-color: var(--color-primary); } .font-size-btn.active + .font-size-btn { border-left-color: var(--color-primary); }   .avatar-menu-toggle-row { display: flex; align-items: center; } .avatar-menu-toggle-row .sound-toggle { flex: 1; display: flex; align-items: center; justify-content: space-between; } .avatar-menu-widget { padding: 4px 16px; }   :root { --msg-item-padding: 10px 14px; --msg-font-size: 13px;   --density-message-row-height: 56px; --density-sidebar-row-height: 40px; --density-table-row-height: 40px; --density-button-padding: 6px 12px 6px 6px; --density-card-padding: 12px 14px; --density-section-padding: 16px; } .message-item .msg-row-main { font-size: var(--msg-font-size);   min-height: var(--density-message-row-height); }   .nav-link { min-height: var(--density-sidebar-row-height); }   .settings-table td{ height: var(--density-table-row-height); }   .home-card, .settings-card { padding: var(--density-card-padding); }   button, a, .nav-link, .home-card, .message-item, .contact-card, .fab-menu-item { transition-property: background-color, color, box-shadow, transform, border-color, opacity; transition-duration: var(--duration-fast); transition-timing-function: ease; }   :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }   html.dark .nav-group-toggle { color: var(--color-text-disabled); } html.dark .nav-group-toggle:hover { color: var(--color-text-tertiary); } html.dark .view-density-toggle { background: var(--color-border-default); } html.dark .density-btn:hover { color: var(--color-text-secondary); background: var(--color-border-muted); } html.dark .density-btn.active { background: var(--color-bg-elevated); color: var(--color-primary-on-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } html.dark .font-size-btn { background: transparent; border-color: var(--color-border-muted); color: var(--color-text-secondary); } html.dark .font-size-btn:hover { color: var(--color-primary-on-surface); } html.dark .font-size-btn.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); border-color: var(--color-primary); } html.dark :focus-visible { outline-color: var(--color-primary); }     .page-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), #6ee7b7, var(--color-primary)); background-size: 200% 100%; animation: progress-shimmer 1.5s ease infinite; z-index: var(--z-skip); transition: width var(--duration-normal) ease, opacity var(--duration-slow) ease; border-radius: 0 2px 2px 0; } @keyframes progress-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }   mark.search-highlight { background: #FEF08A; color: inherit; padding: 1px 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } html.dark mark.search-highlight { background: #854d0e; color: #fef08a; }   .image-preview-popup { position: fixed; z-index: var(--z-skip); background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 8px; max-width: 360px; animation: preview-pop var(--duration-normal) var(--ease-spring); } @keyframes preview-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .image-preview-popup img { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; object-fit: contain; } .image-preview-close { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: #333; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } html.dark .image-preview-popup { background: var(--color-bg-elevated); }   .attachment-chip { position: relative; }   .quote-read-receipt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-tertiary); margin-left: 8px; } .quote-read-receipt svg { width: 14px; height: 14px; } .quote-read-receipt.read svg { stroke: #3B82F6; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } } @keyframes slide-up-fade { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }   .message-item.selected { animation: msg-select var(--duration-normal) ease; } @keyframes msg-select { from { background-color: rgba(34, 187, 128, 0.15); } }   .detail-skeleton { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .detail-skeleton-header { display: flex; align-items: center; gap: 12px; }   .detail-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-bg-sunken) 50%, var(--color-border-default) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } .detail-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } .detail-skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-bg-sunken) 50%, var(--color-border-default) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } .detail-skeleton-line.w60 { width: 60%; } .detail-skeleton-line.w80 { width: 80%; } .detail-skeleton-line.w40 { width: 40%; } .detail-skeleton-body { display: flex; flex-direction: column; gap: 10px; } .detail-skeleton-body .detail-skeleton-line { width: 100%; height: 10px; } .detail-skeleton-body .detail-skeleton-line:nth-child(2) { width: 90%; } .detail-skeleton-body .detail-skeleton-line:nth-child(3) { width: 75%; } .detail-skeleton-body .detail-skeleton-line:nth-child(4) { width: 85%; } .detail-skeleton-body .detail-skeleton-line:nth-child(5) { width: 60%; }   .detail-skeleton-avatar.is-filled { flex-shrink: 0; animation: none; background: var(--color-bg-sunken); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--color-text-secondary); font-weight: var(--weight-bold); } .detail-skeleton-avatar.is-filled > img { width: 100%; height: 100%; object-fit: cover; } .detail-skeleton-avatar.is-filled + .detail-skeleton-lines { min-width: 0; gap: 4px; } .detail-skeleton-name, .detail-skeleton-excerpt { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .detail-skeleton-name { font-weight: var(--weight-bold); color: var(--color-text-primary); } .detail-skeleton-excerpt { color: var(--color-text-tertiary); }   html.dark .detail-skeleton-avatar, html.dark .detail-skeleton-line { background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-border-muted) 50%, var(--color-border-default) 75%); background-size: 200% 100%; }   html.dark .detail-skeleton-avatar.is-filled { background: var(--color-bg-sunken); }   .home-card { animation: card-entrance var(--duration-slow) ease backwards; } .home-card:nth-child(1) { animation-delay: var(--duration-instant); } .home-card:nth-child(2) { animation-delay: var(--duration-fast); } .home-card:nth-child(3) { animation-delay: var(--duration-fast); } .home-card:nth-child(4) { animation-delay: var(--duration-normal); } .home-card:nth-child(5) { animation-delay: var(--duration-normal); } .home-card:nth-child(6) { animation-delay: var(--duration-slow); } @keyframes card-entrance { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }     .theme-color-picker { padding: 4px 0; } .theme-color-label { display: block; font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 6px; } .theme-color-swatches { display: flex; gap: 6px; flex-wrap: wrap; } .theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--duration-fast), border-color var(--duration-fast); padding: 0; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch.active { border-color: var(--color-text-primary); box-shadow: 0 0 0 2px var(--color-bg-base), 0 0 0 4px currentColor; } html.dark .theme-swatch.active { border-color: var(--color-bg-base); }   .link-previews { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .link-preview-card { display: flex; border: 1px solid var(--color-border-default); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--duration-normal), border-color var(--duration-normal); max-width: 480px; background: var(--color-bg-elevated); } .link-preview-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px var(--shadow-sm); } .link-preview-img { width: 120px; min-height: 80px; flex-shrink: 0; overflow: hidden; background: var(--color-border-default); } .link-preview-img img { width: 100%; height: 100%; object-fit: cover; } .link-preview-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .link-preview-domain { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; } .link-preview-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-preview-desc { font-size: 12px; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.dark .link-preview-card { background: var(--color-text-secondary); border-color: var(--color-border-muted); } html.dark .link-preview-title { color: var(--color-text-primary); } html.dark .link-preview-desc { color: #a8a8b8; }   @media (forced-colors: active) { .nav-link.active { border-left: 3px solid LinkText; } .nav-badge { forced-color-adjust: none; } .btn-primary, .bottom-nav-badge { forced-color-adjust: none; } }   @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }   :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .nav-link:focus-visible, .bottom-nav-item:focus-visible { outline-offset: -2px; border-radius: 8px; }   @media print { .sidebar, .mobile-top-bar, .mobile-bottom-nav, .topbar-user, .scroll-top-btn, .fab-container, .tool-palette, .ai-panel, .toast-container, .notification-bell, .global-search-wrap, .offline-banner, .nav-header, .shortcuts-overlay { display: none !important; } .main-content { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } .app-layout { display: block !important; } .msg-detail-panel { border: none !important; box-shadow: none !important; } .msg-item { break-inside: avoid; } body { font-size: 11pt; } }   .breadcrumb { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 12px; color: var(--color-text-tertiary); } .breadcrumb a { color: var(--color-primary-on-surface); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; }   .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; color: var(--color-text-tertiary); }   [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.9); background: var(--color-text-primary); color: white; padding: 4px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast), transform var(--duration-fast); z-index: var(--z-skip); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }   .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: var(--weight-semibold); }   ::selection { background: var(--color-primary); color: white; }   .main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background: var(--color-border-muted); border-radius: 3px; } .main-content::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } html.dark .main-content::-webkit-scrollbar-thumb { background: var(--color-border-muted); }   .avatar-group { display: flex; } .avatar-group .avatar-circle { width: 28px; height: 28px; border: 2px solid var(--color-bg-base); margin-left: -8px; font-size: 11px; } .avatar-group .avatar-circle:first-child { margin-left: 0; } html.dark .avatar-group .avatar-circle { border-color: var(--color-text-secondary); }   .drop-zone { border: 2px dashed var(--color-border-muted); border-radius: 12px; padding: 32px; text-align: center; transition: border-color var(--duration-normal), background var(--duration-normal); } .drop-zone.drag-over { border-color: var(--color-primary); background: var(--color-primary-surface); } html.dark .drop-zone.drag-over { background: rgba(34,187,128,0.08); }   .shimmer { background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-bg-sunken) 50%, var(--color-border-default) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html.dark .shimmer { background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-border-muted) 50%, var(--color-border-default) 75%); background-size: 200% 100%; }     .pull-refresh-hint { display: none; height: 0; overflow: hidden; text-align: center; color: var(--color-text-tertiary); opacity: 0; transition: opacity var(--duration-normal), height var(--duration-normal); } .pull-refresh-hint.visible { opacity: 1; height: 34px; } .pull-refresh-hint.ready { color: var(--color-primary-on-surface); } .pull-refresh-hint.ready svg { animation: ptr-spin 1s linear infinite; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .pull-refresh-hint { display: block; } }   .time-relative { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; } .time-relative:hover { color: var(--color-primary-on-surface); }     .emoji-picker-panel { position: absolute; bottom: calc(100% + 8px); left: 0; width: 320px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: 0 8px 32px var(--shadow-lg); z-index: var(--z-popover); overflow: hidden; animation: emoji-pop var(--duration-fast) ease; } @keyframes emoji-pop { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .emoji-picker-search { padding: 8px 10px 4px; } .emoji-search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; font-size: 13px; outline: none; background: var(--color-bg-sunken); } .emoji-search-input:focus { border-color: var(--color-primary); } .emoji-picker-tabs { display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--color-border-default); } .emoji-tab { flex: 1; padding: 6px 0; background: none; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background var(--duration-fast); } .emoji-tab:hover { background: var(--color-bg-sunken); } .emoji-tab.active { background: var(--color-primary-surface); } .emoji-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px 8px; max-height: 200px; overflow-y: auto; } .emoji-cell { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: none; border-radius: 6px; font-size: 20px; cursor: pointer; transition: background var(--duration-fast), transform var(--duration-fast); } .emoji-cell:hover { background: var(--color-bg-sunken); transform: scale(1.15); } .emoji-picker-footer { padding: 6px 10px 8px; border-top: 1px solid var(--color-border-default); } .emoji-picker-recent-label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; } .emoji-recent-row { display: flex; gap: 2px; margin-top: 4px; } html.dark .emoji-picker-panel { background: var(--color-bg-sunken); border-color: var(--color-border-muted); } html.dark .emoji-search-input { background: var(--color-border-default); border-color: var(--color-border-muted); color: var(--color-text-primary); } html.dark .emoji-tab:hover { background: var(--color-border-default); } html.dark .emoji-tab.active { background: rgba(34,187,128,0.15); } html.dark .emoji-cell:hover { background: var(--color-border-default); } html.dark .emoji-picker-footer { border-color: var(--color-border-muted); }   .char-count { font-size: 11px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; transition: color var(--duration-normal); } .char-count.near-limit { color: #c48800; } .char-count.over-limit { color: var(--color-error); font-weight: var(--weight-semibold); }   .upload-progress-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--color-bg-elevated); border-radius: 10px; border: 1px solid var(--color-border-default); margin: 8px 0; } .upload-progress-item { display: flex; flex-direction: column; gap: 4px; } .upload-file-info { display: flex; align-items: center; gap: 6px; } .upload-file-icon { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; } .upload-file-name { font-size: 12px; font-weight: var(--weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .upload-file-size { font-size: 11px; color: var(--color-text-tertiary); flex-shrink: 0; } .upload-progress-bar-track { height: 4px; background: var(--color-border-default); border-radius: 2px; overflow: hidden; } .upload-progress-bar-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width var(--duration-slow) ease; } .upload-progress-bar-fill.complete { background: var(--color-primary); } .upload-progress-bar-fill.error { background: var(--color-error); } .upload-status-text { font-size: 11px; color: var(--color-text-tertiary); text-align: right; } .upload-status-text.complete { color: var(--color-primary-on-surface); } .upload-status-text.error { color: var(--color-error); } html.dark .upload-progress-panel { background: var(--color-bg-sunken); border-color: var(--color-border-muted); } html.dark .upload-file-name { color: var(--color-text-primary); } html.dark .upload-progress-bar-track { background: var(--color-border-default); } @keyframes context-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes reply-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }   .tab-bar { display: flex; position: relative; border-bottom: 2px solid var(--color-border-default); } @keyframes ink-slide { from { transform: scaleX(0); } to { transform: scaleX(1); } }   .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: var(--weight-medium); background: var(--color-primary-surface); color: var(--color-primary-dark); white-space: nowrap; } .tag-chip-remove { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; opacity: 0.6; } .tag-chip-remove:hover { opacity: 1; } html.dark .tag-chip { background: rgba(34,187,128,0.15); color: #7ee8c0; }   .sound-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .sound-toggle-label { font-size: 12px; color: var(--color-text-secondary); } .sound-toggle-switch { width: 36px; height: 20px; background: var(--color-border-muted); border-radius: 10px; position: relative; cursor: pointer; border: none; padding: 0; transition: background var(--duration-normal); } .sound-toggle-switch.on { background: var(--color-primary); } .sound-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform var(--duration-normal); } .sound-toggle-switch.on::after { transform: translateX(16px); }   @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .confetti-piece { position: fixed; width: 8px; height: 8px; border-radius: 2px; animation: confetti-fall 2s ease-out forwards; z-index: var(--z-skip); pointer-events: none; }   .live-dot { width: 8px; height: 8px; background: var(--color-error); border-radius: 50%; display: inline-block; animation: pulse-dot 1.5s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mobile-top-bar { transition: transform var(--duration-normal) ease; } .mobile-top-bar.hidden-up { transform: translateY(-100%); } } @media (min-width: 1200px) { }     .tag-input-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); transition: border-color var(--duration-normal); min-height: 38px; } .tag-input-wrap:focus-within { border-color: var(--color-primary); } .tag-chips { display: flex; flex-wrap: wrap; gap: 4px; } .tag-input-field { flex: 1; min-width: 80px; border: none; outline: none; font-size: 13px; background: transparent; color: var(--color-text-primary); } .tag-input-field::placeholder { color: var(--color-text-tertiary); } html.dark .tag-input-wrap { background: var(--color-bg-sunken); border-color: var(--color-border-muted); } html.dark .tag-input-field { color: var(--color-text-primary); }   .avatar-overflow { background: var(--color-border-default) !important; color: var(--color-text-secondary); } .avatar-overflow .avatar-initial { font-size: 10px; font-weight: var(--weight-semibold); } html.dark .avatar-overflow { background: var(--color-border-muted) !important; color: #a8a8b8; } @keyframes badge-ping { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }   kbd { display: inline-block; padding: 2px 6px; font-size: 11px; font-family: 'SFMono-Regular', 'Consolas', monospace; color: var(--color-text-secondary); background: var(--color-bg-sunken); border: 1px solid var(--color-border-muted); border-radius: 4px; box-shadow: 0 1px 0 var(--color-border-muted); line-height: 1.4; } html.dark kbd { background: var(--color-border-default); border-color: #4a4a5e; color: #c4c4d0; box-shadow: 0 1px 0 var(--color-bg-elevated); }   .timeline { display: flex; flex-direction: column; padding-left: 20px; position: relative; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--color-border-default); } .timeline-item { position: relative; padding: 0 0 20px 20px; } .timeline-item::before { content: ''; position: absolute; left: -16px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-bg-base); } html.dark .timeline::before { background: var(--color-border-muted); } html.dark .timeline-item::before { border-color: var(--color-bg-sunken); }   .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 16px 0; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .dashboard-grid { grid-template-columns: 1fr; } }   .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 0; }   .sp-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--color-text-primary); user-select: none; } .sp-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--color-border-muted); border-radius: 4px; cursor: pointer; transition: all var(--duration-fast); position: relative; flex-shrink: 0; } .sp-checkbox input[type="checkbox"]:checked { background: var(--color-primary); border-color: var(--color-primary); } .sp-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } html.dark .sp-checkbox { color: var(--color-text-primary); } html.dark .sp-checkbox input[type="checkbox"] { border-color: #4a4a5e; } @media (max-width: 1024px) { } @media (max-width: 640px) { } @media (max-width: 480px) { } .color-input { width: 0; height: 0; opacity: 0; position: absolute; }   .split-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .split-pane { grid-template-columns: 1fr; } }       .slide-over-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 899; opacity: 0; transition: opacity var(--duration-normal) ease; pointer-events: none; } .slide-over-overlay.open { opacity: 1; pointer-events: auto; } .slide-over-panel { position: fixed;   top: var(--topbar-height); right: 0;   width: 520px; height: calc(100vh - var(--topbar-height)); background: var(--color-bg-base); box-shadow: -8px 0 32px rgba(0,0,0,0.10); z-index: var(--z-toast); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-in-out), width var(--duration-normal) var(--ease-in-out); overflow: hidden; }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) {   body:has(.space-tabs.space-tabs-top:not(.collapsed)) .slide-over-panel { top: calc(var(--topbar-height) + var(--space-tabs-height)); height: calc(100vh - var(--topbar-height) - var(--space-tabs-height)); } body:has(.space-tabs.space-tabs-top.collapsed) .slide-over-panel { top: calc(var(--topbar-height) + var(--space-tabs-collapsed-height)); height: calc(100vh - var(--topbar-height) - var(--space-tabs-collapsed-height)); } }   .slide-over-panel.open { transform: none; } html.dark .slide-over-panel { background: var(--color-bg-sunken); } .slide-over-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); flex-shrink: 0; min-height: 52px; } .slide-over-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0; } .slide-over-header-actions { display: flex; align-items: center; gap: 8px; } .slide-over-fullpage { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-primary-on-surface); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-md); transition: background var(--duration-fast) ease; white-space: nowrap; } .slide-over-fullpage:hover { background: var(--color-primary-surface); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .slide-over-fullpage { display: none; } } .slide-over-icon { width: 14px; height: 14px; } .slide-over-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .slide-over-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .slide-over-close svg { width: 18px; height: 18px; }   .slide-over-back, .slide-over-pin, .slide-over-edit { display: flex; align-items: center; justify-content: center; width: 32px;   height: 32px; border: none; background: none; color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; flex: 0 0 auto; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .slide-over-back { margin-right: var(--space-1); } .slide-over-back:hover, .slide-over-pin:hover, .slide-over-edit:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .slide-over-back svg { width: 14px; height: 16px; } .slide-over-pin svg { width: 16px; height: 16px; }     .slide-over-edit.dimmed { opacity: .45; } .slide-over-pin.active { color: var(--color-primary-on-surface); background: var(--color-primary-surface); }   .slide-over-panel.pinned { box-shadow: var(--shadow-md); } .slide-over-body { flex: 1; overflow-y: auto; padding: 0; }   .panel-content { padding: 16px; }   .panel-content-flush { padding: 0; height: 100%; min-height: 0; } .panel-search { margin-bottom: 12px; } .panel-search-input-wrap { position: relative; display: flex; align-items: center; } .panel-search-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--color-text-tertiary); pointer-events: none;   z-index: 1; } .panel-search-input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-size: 13px; background: var(--color-bg-base); color: var(--color-text-primary); outline: none; transition: border-color var(--duration-fast) ease; } .panel-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34,187,128,0.1); } .panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border-default); margin-bottom: 16px; } .panel-tab { flex: 1; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease; text-align: center; } .panel-tab:hover { color: var(--color-text-primary); } .panel-tab.active { color: var(--color-primary-on-surface); border-bottom-color: var(--color-primary); } .panel-section-title { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; animation: panel-empty-in 0.3s ease; } @keyframes panel-empty-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .panel-empty-icon { width: 48px; height: 48px; color: var(--color-border-muted); opacity: 0.5; margin-bottom: 12px; } .panel-empty-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 4px 0; } .panel-empty-desc { font-size: 13px; color: var(--color-text-tertiary); margin: 0; max-width: 260px; } .panel-divider { height: 1px; background: var(--color-border-default); margin: 16px 0; }   .member-edit-avatar-area { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 16px; } .member-edit-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .member-edit-avatar svg { width: 32px; height: 32px; color: var(--color-primary-on-surface); } .member-edit-name { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; } .member-edit-email { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; } .member-edit-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-tertiary); } .member-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); } .member-status-dot.offline { background: var(--color-text-tertiary); } .member-status-dot.idle { background: var(--color-warning); } .member-edit-info { padding: 0; } .member-edit-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; } .member-edit-label { color: var(--color-text-tertiary); } .member-edit-value { color: var(--color-text-primary); font-weight: 500; } .member-edit-msg-btn { width: 100%; padding: 10px; font-size: 14px; }   .panel-contact-list { display: flex; flex-direction: column; gap: 0; } .panel-contact-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border-default); cursor: pointer; transition: background var(--duration-fast) ease; border-radius: var(--radius-sm); padding-left: 4px; padding-right: 4px; } .panel-contact-item:hover { background: var(--color-primary-surface-light, var(--color-bg-elevated)); } .panel-contact-item.retired { opacity: 0.55; } .panel-contact-item:last-child { border-bottom: none; } .panel-contact-avatar { width: 36px; height: 36px; border-radius: var(--radius-avatar); overflow: hidden; flex-shrink: 0; background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; } .panel-contact-avatar img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-avatar); } .panel-avatar-initial { font-size: 14px; font-weight: 600; color: var(--color-primary-on-surface); } .panel-avatar-initial.legal { font-size: 12px; color: var(--color-feature-tracking); background: rgba(124,58,237,0.1); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-avatar); } .panel-contact-info { flex: 1; min-width: 0; } .panel-contact-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--color-text-primary); } .panel-contact-email { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; } .panel-admin-badge { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: 600; } .panel-retired-badge { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--color-error-surface, #fde8e8); color: var(--color-error); font-weight: 600; } .panel-attr-badge { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--color-bg-elevated); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } .panel-contact-action { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-text-tertiary); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .panel-contact-action:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }   .panel-skeleton { padding: 0; } .panel-skeleton-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; animation: skeleton-pulse 1.5s ease-in-out infinite; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }   .panel-ext-detail { padding: 0; } .panel-ext-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: var(--color-text-primary); } .panel-ext-sub { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; } .panel-ext-section { margin-bottom: 8px; }   .member-project-chips { display: flex; flex-wrap: wrap; gap: 6px; } .member-project-chip { font-size: 11px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); }   .member-admin-controls { display: flex; flex-direction: column; gap: 8px; } .member-admin-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; } .member-admin-toggle input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; } .status-started { background: var(--color-info-surface, #e8f0fd); color: var(--color-info); } .status-complete { background: var(--color-success-surface, #e6f9f0); color: var(--color-success); } .status-canceled { background: var(--color-bg-elevated); color: var(--color-text-tertiary); }   .panel-track-list { display: flex; flex-direction: column; gap: 0; } .panel-track-item { padding: 10px 0; border-bottom: 1px solid var(--color-border-default); cursor: pointer; transition: background var(--duration-fast) ease; margin: 0 -4px; padding-left: 4px; padding-right: 4px; border-radius: var(--radius-sm); } .panel-track-item:hover { background: var(--color-bg-elevated); } .panel-track-item:last-child { border-bottom: none; } .panel-track-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .panel-track-name { font-size: 13px; font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .panel-track-genre { flex-shrink: 0; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); margin-left: 6px; } .panel-track-meta { display: flex; gap: 8px; font-size: 11px; color: var(--color-text-tertiary); } .panel-track-latest { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; } .panel-track-event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }   .slide-over-panel.wide { width: 520px; }   @media (max-width: 640px) {   .slide-over-panel, .slide-over-panel.wide { width: 100% !important; } }   .slide-over-body .settings-tab { padding: 0; } .slide-over-body .settings-section { margin-bottom: 16px; } .slide-over-body .settings-input { max-width: 100%; } .slide-over-body .settings-actions { position: sticky; bottom: 0; background: var(--color-bg-base); padding: 12px 0; border-top: 1px solid var(--color-border-default); margin-top: 8px; } html.dark .slide-over-body .settings-actions { background: var(--color-bg-sunken); }   @media (max-width: 480px) { .slide-over-panel, .slide-over-panel.wide { width: 100vw !important; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .slide-over-overlay.open { background: rgba(0,0,0,0.35); } .slide-over-panel.wide { width: 100vw !important; } } 
/*css/screens/20-cabinet-tabs.css*/
    .cabinet-file-area {   flex: 1; min-height: 0; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .cabinet-file-area.is-folder-view { grid-template-columns: auto 6px minmax(0, 1fr); } .cabinet-file-area > .panel-splitter { grid-row: 2; grid-column: 2; }   .cabinet-file-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 16px; } .cabinet-file-content { display: contents; }   .cabinet-content-tab { flex: 1; overflow-y: auto; padding: 20px 24px; } .contact-search { flex: 1; max-width: 300px; }   .settings-tab-section { margin-bottom: 28px; } .settings-tab-section h4 { margin: 0 0 4px 0; } .settings-keyword-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--color-bg-sunken); border-radius: 12px; font-size: var(--font-sm); }     .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; cursor: pointer; font-family: inherit; font-weight: var(--weight-semibold); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-default); position: relative; overflow: hidden; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: transparent; color: var(--color-primary-on-surface); border: 1px solid var(--color-primary); } .btn-secondary:hover { background: var(--color-primary-surface); } .btn-ghost { background: transparent; color: var(--color-text-secondary); } .btn-ghost:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .btn-danger { background: var(--color-error); color: #fff; } .btn-danger:hover { background: #dc2626; } .btn-icon { background: none; color: var(--color-text-tertiary); padding: 0; border: none; } .btn-icon:hover { color: var(--color-primary-on-surface); background: var(--color-bg-sunken); } .btn-xs { height: 24px; padding: 0 8px; font-size: var(--font-xs); } .btn-sm { height: 28px; padding: 0 10px; font-size: var(--font-xs); } .btn-icon.btn-xs { width: 24px; height: 24px; padding: 0; border-radius: var(--radius-sm); } .btn-icon.btn-sm { width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm); }   .btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .btn:active::after { opacity: 1; transition: opacity 0s; }   .cabinet-layout { gap: 0; background: transparent; }       .cabinet-file-panel { display: contents; }   .cabinet-file-list::-webkit-scrollbar { width: 6px; } .cabinet-file-list::-webkit-scrollbar-track { background: transparent; } .cabinet-file-list::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 3px; } .cabinet-file-list::-webkit-scrollbar-thumb:hover { background: var(--color-border-muted); }   .cabinet-status-bar { grid-row: 3; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); padding: 3px 8px; border-top: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); flex-shrink: 0; background: var(--color-bg-base); } .cabinet-status-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .cabinet-tree-item { display: flex; align-items: center; gap: 6px; min-height: 26px; cursor: pointer; transition: background var(--duration-fast) var(--ease-default); position: relative; } .cabinet-tree-item:hover:not(.active) { transform: translateX(1px); }   .cabinet-address-bar { display: flex; align-items: center; flex: 1; min-width: 0; gap: 0; height: 24px; margin: 0 8px 0 4px; border: 1px solid var(--color-border-default); transition: border-color var(--duration-fast) var(--ease-default); } .cabinet-address-bar:focus-within { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(34,187,128,0.15); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { }   .cabinet-folder-panel { grid-row: 2; grid-column: 1; width: var(--folder-width); min-width: 240px; max-width: 400px; overflow: auto; padding: 4px 0; background: var(--color-bg-base); outline: none; } .cabinet-tree-item { display: flex; align-items: center; padding: 3px 0; padding-right: var(--space-2); cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); transition: background var(--duration-fast) var(--ease-default); border-left: 2px solid transparent; position: relative; } .cabinet-tree-item:hover { background: var(--color-bg-sunken); } .cabinet-tree-item.active { background: var(--color-primary-surface); } .cabinet-tree-arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-text-disabled); font-size: 10px; transition: transform var(--duration-fast) var(--ease-default); } .cabinet-tree-arrow.expanded { transform: rotate(90deg); } .cabinet-tree-arrow.empty { visibility: hidden; } .cabinet-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }   .cabinet-tree-rename { flex: 1; min-width: 0; padding: 0 var(--space-1); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font: inherit; }   .folder-glyph { flex-shrink: 0; display: inline-block; vertical-align: middle; } .folder-glyph-back { fill: var(--color-folder-back); } .folder-glyph-front { fill: var(--color-folder-front); } .folder-glyph.is-inbox .folder-glyph-back { fill: var(--color-folder-inbox-back); } .folder-glyph.is-inbox .folder-glyph-front { fill: var(--color-folder-inbox-front); } .folder-glyph.is-local .folder-glyph-back { fill: var(--color-folder-local-back); } .folder-glyph.is-local .folder-glyph-front { fill: var(--color-folder-local-front); } .folder-glyph.is-message .folder-glyph-back { fill: var(--color-folder-message-back); } .folder-glyph.is-message .folder-glyph-front { fill: var(--color-folder-message-front); }   .cabinet-tree-trash-glyph { font-size: var(--font-base); line-height: 1; }   .cabinet-tree-status { padding: 4px 12px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-align: center; } .cabinet-tree-trash { margin-top: 4px; }           .cabinet-tab-enter { animation: cabinetTabFadeIn var(--duration-fast) var(--ease-default); } @keyframes cabinetTabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }   .cabinet-breadcrumb { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 0; height: 34px; min-height: 34px; padding: 0 0 6px; background: transparent; border-bottom: 0; } .cabinet-address-bar { display: flex; align-items: center; flex: 1; min-width: 0; gap: 0; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 2px 4px; transition: border-color var(--duration-fast) var(--ease-default); } .cabinet-address-bar:focus-within { border-color: var(--color-primary); background: var(--color-bg-base); } .cabinet-crumb { background: none; border: none; color: var(--color-text-primary); font-size: var(--font-xs); font-weight: var(--weight-normal); cursor: pointer; padding: 1px 2px; border-radius: 2px; transition: all var(--duration-fast) var(--ease-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .cabinet-crumb:hover { background: var(--color-bg-sunken); color: var(--color-primary-on-surface); text-decoration: underline; } .cabinet-crumb:last-of-type { color: var(--color-text-primary); pointer-events: none; } .cabinet-crumb-sep { color: var(--color-text-tertiary); margin: 0 2px; flex-shrink: 0; }     .cabinet-address-bar.is-bare:not(:focus-within) { background: transparent; border-color: transparent; }   .cabinet-view-segment { display: inline-flex; align-items: stretch; flex-shrink: 0; } .cabinet-view-segment-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: var(--font-xs); color: var(--color-text-secondary); background: var(--color-bg-base); border: 1px solid var(--color-border-default); cursor: pointer; white-space: nowrap; } .cabinet-view-segment-btn:first-child { border-radius: 5px 0 0 5px; } .cabinet-view-segment-btn:last-child { border-radius: 0 5px 5px 0; border-left-width: 0; } .cabinet-view-segment-btn:hover { background: var(--color-bg-sunken); } .cabinet-view-segment-btn.active { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); }   .cabinet-preview-toggle { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; font-size: var(--font-xs); color: var(--color-text-secondary); background: transparent; border: 0; border-radius: 5px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .cabinet-preview-toggle:hover { background: var(--color-bg-sunken); } .cabinet-preview-toggle.active { color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); }   .cabinet-preview-toggle-icon { transform: scaleX(-1); }   .cabinet-toolbar-sep { width: 1px; height: 18px; margin: 0 6px 0 2px; background: var(--color-border-default); flex-shrink: 0; }   .cabinet-toolbar-iconbtn { width: 24px; height: 24px; margin-right: 1px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-primary); cursor: pointer; flex-shrink: 0; } .cabinet-toolbar-iconbtn:hover { background: var(--color-bg-sunken); } .cabinet-toolbar-iconbtn:disabled { opacity: 0.3; cursor: default; }   .cabinet-toolbar-search { display: flex; align-items: center; width: 180px; height: 24px; margin-left: 8px; border: 1px solid var(--color-border-default); border-radius: 5px; background: var(--color-bg-base); flex-shrink: 0; } .cabinet-toolbar-search input { flex: 1; min-width: 0; height: 20px; margin-left: 4px; border: 0; outline: 0; background: transparent; font-size: var(--font-xs); color: var(--color-text-primary); } .cabinet-toolbar-search input::placeholder { color: var(--color-text-tertiary); } .cabinet-toolbar-search-btn { width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .cabinet-toolbar-search-btn:hover { background: var(--color-bg-sunken); }   .cabinet-file-input.cabinet-file-input-hidden { position: absolute; inset: auto; width: 0; height: 0; opacity: 0; pointer-events: none; }   .cabinet-file-header { display: flex; align-items: center; padding: 0 var(--space-2); background: transparent; border-bottom: 1px solid var(--color-border-default); position: sticky; top: 0; z-index: var(--z-sticky); min-height: 24px; user-select: none; } .cabinet-file-header .cabinet-col-name, .cabinet-file-header .cabinet-col-folder, .cabinet-file-header .cabinet-col-size, .cabinet-file-header .cabinet-col-type, .cabinet-file-header .cabinet-col-date { font-size: var(--font-xs); font-weight: var(--weight-normal); color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; padding: 0 2px 0 8px; transition: background var(--duration-fast), color var(--duration-fast); white-space: nowrap; overflow: hidden; }   .cabinet-file-header .cabinet-col-size, .cabinet-file-header .cabinet-col-type, .cabinet-file-header .cabinet-col-date { cursor: pointer; border-left: 1px solid var(--color-border-default); } .cabinet-file-header .cabinet-col-name { cursor: pointer; } .cabinet-file-header .cabinet-col-name:hover, .cabinet-file-header .cabinet-col-size:hover, .cabinet-file-header .cabinet-col-type:hover, .cabinet-file-header .cabinet-col-date:hover { background: var(--color-border-default); color: var(--color-text-primary); }   .cabinet-file-header .cabinet-col-folder { cursor: default; border-left: 1px solid var(--color-border-default); } .cabinet-file-header .cabinet-col-actions { border-right: none; }   .cabinet-file-row { min-height: 25px; margin: 1px 0; transition: background var(--duration-fast) var(--ease-default); border-radius: 0; }   .cabinet-file-row.is-cut { opacity: 0.4; }   .cabinet-file-ai { display: inline-flex; flex-shrink: 0; margin-left: 4px; color: var(--color-primary-on-surface); }   .cabinet-tree-hub-entry { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 8px; padding: 8px 10px; border: none; border-top: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); font-size: 12px; cursor: pointer; text-align: left; } .cabinet-tree-hub-entry:hover { background: var(--color-bg-sunken); }   .cabinet-file-hub { display: inline-flex; flex-shrink: 0; margin-left: 6px; padding: 0 6px; font-size: 10px; line-height: 16px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); color: var(--color-text-secondary); white-space: nowrap; } .cabinet-file-hub.is-dup { color: var(--color-warning-on-surface); border-color: var(--color-warning); } .cabinet-file-row:hover { background: var(--color-bg-sunken); } .cabinet-file-row.selected { background: var(--color-bulk-selected-surface); } .cabinet-file-row.selected:hover { background: var(--color-bulk-selected-surface); }   .cabinet-file-icon { width: 24px; height: 24px; flex-shrink: 0; }   .cabinet-file-appicon { width: 100%; height: 100%; object-fit: contain; display: block; }   .cabinet-file-list { position: relative; } .cabinet-upload-overlay { position: absolute; inset: 0; background: rgba(34,187,128,0.06); border: 2px dashed var(--color-primary); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); z-index: var(--z-overlay); backdrop-filter: blur(2px); animation: cabinetTabFadeIn var(--duration-fast) var(--ease-default); } .cabinet-upload-overlay-icon { width: 48px; height: 48px; color: var(--color-primary-on-surface); } .cabinet-upload-overlay-text { font-size: var(--font-md); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); }   .cabinet-preparing-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; z-index: var(--z-overlay); }   .cabinet-ctx-menu { min-width: 220px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-1) 0; z-index: var(--z-popover); backdrop-filter: blur(20px); animation: cabinet-menu-open var(--duration-fast) var(--ease-default); max-height: calc(100vh - 16px); overflow-y: auto; }   .cab-upper { padding: 12px 20px 20px; border-top: 1px solid var(--color-border-default); } .cab-upper-head { display: flex; align-items: center; gap: 6px; } .cab-upper-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cab-upper-count { font-size: var(--font-xs); color: var(--color-text-tertiary); } .cab-upper-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); margin: 4px 0 8px; } .cab-upper-empty { font-size: var(--font-xs); color: var(--color-text-tertiary); padding: 8px 0; } .cab-upper-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .cab-upper-hours { width: 80px; }   .cab-upper-sec-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; } .cab-upper-sec-spacer { flex: 1; } .cab-upper-refresh { display: inline-flex; align-items: center; justify-content: center; padding: 4px 3px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; opacity: 0.7; } .cab-upper-refresh:hover { background: var(--color-feature-timelog-surface); color: var(--color-text-primary); } .cab-upper-refresh[disabled] { cursor: default; } .cab-upper-refresh.is-spinning svg { animation: cabUpperSpin 1s linear infinite; }   .cab-upper-lastupdated { margin-left: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); visibility: hidden; white-space: nowrap; } .cab-upper-refresh:hover + .cab-upper-lastupdated { visibility: visible; } @keyframes cabUpperSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }   .cab-total { padding: 12px 16px 0; } .cab-total-cards { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cab-total-card { padding: 10px 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-base); } .cab-total-card-head { display: flex; align-items: center; gap: 6px; } .cab-total-member { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cab-total-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); align-self: flex-end; padding-bottom: 2px; } .cab-total-value { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-feature-timelog); } .cab-total-divider { height: 1px; margin: 8px 0; background: var(--color-border-muted); } .cab-total-months { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cab-total-chip { display: flex; flex-direction: column; min-width: 64px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); } .cab-total-chip.is-current { background: var(--color-feature-timelog-surface); } .cab-total-chip-month { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .cab-total-chip-value { margin-top: 2px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cab-total-chip-value.is-current { color: var(--color-feature-timelog); } .cab-total-chip-value.is-empty { color: var(--color-text-tertiary); font-weight: var(--weight-normal); }   .cab-upper-cards { display: flex; flex-direction: column; gap: 6px; } .cab-upper-card { padding: 10px 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-elevated); } .cab-upper-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cab-upper-member { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cab-upper-badge { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .cab-upper-remove { border: none; background: transparent; color: var(--color-error); opacity: 0.5; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); } .cab-upper-remove:hover { opacity: 1; background: var(--color-error-surface); } .cab-upper-card-row { display: flex; align-items: center; gap: 6px; } .cab-upper-cap, .cab-upper-used { font-size: var(--font-xs); color: var(--color-text-tertiary); } .cab-upper-cap b { color: var(--color-text-primary); font-weight: var(--weight-semibold); } .cab-upper-rate { font-size: var(--font-sm); font-weight: var(--weight-bold); } .cab-upper-bar { height: 8px; border-radius: 4px; background: var(--color-border-muted); overflow: hidden; margin: 4px 0 6px; } .cab-upper-bar-fill { display: block; height: 100%; border-radius: 4px; } .cab-upper-rate.is-ok, .cab-upper-used b.is-ok { color: var(--color-success); } .cab-upper-rate.is-warn, .cab-upper-used b.is-warn { color: var(--color-warning); } .cab-upper-rate.is-over, .cab-upper-used b.is-over { color: var(--color-error); } .cab-upper-bar-fill.is-ok { background: var(--color-success); } .cab-upper-bar-fill.is-warn { background: var(--color-warning); } .cab-upper-bar-fill.is-over { background: var(--color-error); } .cabinet-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 14px; background: none; border: none; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); text-align: left; transition: background var(--duration-fast) var(--ease-default); } .cabinet-ctx-item:hover { background: var(--color-bg-sunken); } .cabinet-ctx-item .ctx-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-tertiary); } .cabinet-ctx-item .ctx-shortcut { margin-left: auto; font-size: var(--font-xs); color: var(--color-text-disabled); } .cabinet-ctx-item.is-disabled { opacity: 0.4; pointer-events: none; } .cabinet-ctx-item .ctx-label { flex: 1; }   .cabinet-ctx-menu [data-ak]::after { content: "(" attr(data-ak) ")"; } .cabinet-ctx-item.danger { color: var(--color-error); } .cabinet-ctx-item.danger:hover { background: var(--color-error-surface); } .cabinet-ctx-item.danger .ctx-icon { color: var(--color-error); } .cabinet-ctx-sep { height: 1px; background: var(--color-border-default); margin: var(--space-1) 0; }   .cabinet-ctx-heading { padding: var(--space-2) 14px 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .cabinet-ctx-item.is-sendto { padding-left: 40px; }   .cabinet-props { max-width: 420px; padding: var(--space-3) var(--space-4) 14px; } .cabinet-props-title { margin-bottom: var(--space-2); font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow-wrap: anywhere; } .cabinet-props-grid { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: 6px; font-size: var(--font-xs); } .cabinet-props-key { color: var(--color-text-tertiary); } .cabinet-props-value { color: var(--color-text-primary); overflow-wrap: anywhere; }   body.cabinet-right-dragging, body.cabinet-right-dragging * { cursor: copy !important; user-select: none; }   .cabinet-pdf-slide { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; min-width: 400px; max-width: 800px; background: var(--color-bg-base); box-shadow: -4px 0 24px rgba(0,0,0,0.1); z-index: var(--z-overlay); display: flex; flex-direction: column; animation: pdfSlideIn var(--duration-normal) var(--ease-default); } .cabinet-pdf-slide-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-default); min-height: 40px; } .cabinet-pdf-slide-body { flex: 1; overflow: hidden; }   .cabinet-preview-notice { align-items: center; justify-content: center; } .cabinet-preview-notice-body { max-width: 320px; margin: 20px; text-align: center; } .cabinet-preview-notice-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow-wrap: anywhere; } .cabinet-preview-notice-detail { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); } .cabinet-preview-notice-action { margin-top: 14px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; } .cabinet-preview-notice-action:hover { background: var(--color-primary-surface-light); } @keyframes pdfSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }   .cabinet-skeleton-row { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-3); } .cabinet-skeleton-block { background: var(--color-bg-sunken); border-radius: var(--radius-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; } .cabinet-skeleton-icon { width: 20px; height: 20px; border-radius: var(--radius-sm); } .cabinet-skeleton-text { height: 14px; border-radius: var(--radius-sm); } .cabinet-skeleton-text.w-40 { width: 40%; } .cabinet-skeleton-text.w-60 { width: 60%; } .cabinet-skeleton-text.w-80 { width: 80%; } .cabinet-skeleton-text.w-20 { width: 20%; }   .cabinet-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: var(--space-10); text-align: center; gap: var(--space-6); animation: cabinetTabFadeIn var(--duration-normal) var(--ease-default); } .cabinet-welcome-icon { width: 64px; height: 64px; color: var(--color-primary-muted); } .cabinet-welcome-title { font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cabinet-welcome-desc { font-size: var(--font-sm); color: var(--color-text-tertiary); max-width: 400px; line-height: var(--leading-normal); } .cabinet-welcome-cards { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .cabinet-welcome-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-6); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--duration-fast) var(--ease-default); min-width: 140px; } .cabinet-welcome-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .cabinet-welcome-card-icon { width: 32px; height: 32px; color: var(--color-primary-on-surface); } .cabinet-welcome-card-icon.is-folder { color: var(--color-folder-back); }   .cabinet-welcome-card-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); } .cabinet-welcome-card-count { font-size: var(--font-xs); color: var(--color-text-tertiary); } @keyframes floatingBarIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .cabinet-tree-item.drag-over { background: var(--color-primary-surface); border-left-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary-muted); } .cabinet-tree-item.drag-over-trash { background: var(--color-error-surface); border-left-color: var(--color-error); }   .cabinet-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); text-align: center; gap: var(--space-4); flex: 1; } .cabinet-empty-icon { width: 56px; height: 56px; color: var(--color-text-disabled); opacity: 0.5; } .cabinet-empty-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .cabinet-empty-desc { font-size: var(--font-sm); color: var(--color-text-tertiary); max-width: 300px; line-height: var(--leading-normal); }   .cabinet-empty-iconbox { width: 48px; height: 48px; border-radius: 12px; background: var(--color-bg-sunken); color: var(--color-text-disabled); display: flex; align-items: center; justify-content: center; }   .cabinet-empty.is-folder-empty { gap: var(--space-2); } .cabinet-empty.is-folder-empty .cabinet-empty-title { font-size: var(--font-sm); font-weight: var(--weight-normal); color: var(--color-text-tertiary); } .cabinet-empty.is-folder-empty .cabinet-empty-desc { font-size: var(--font-xs); color: var(--color-text-disabled); }   .cabinet-empty.is-list-empty { gap: var(--space-2); } .cabinet-empty.is-list-empty .cabinet-empty-title { font-size: var(--font-sm); } .cabinet-empty.is-list-empty .cabinet-empty-desc { font-size: var(--font-xs); max-width: 380px; } .cabinet-empty-note { font-size: var(--font-xs); color: var(--color-text-disabled); }   @media (max-width: 1024px) { .cabinet-nav-panel { width: 48px; } .cabinet-nav-panel .cabinet-project-header, .cabinet-nav-panel .cabinet-project-scroll, } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .cabinet-pdf-slide { width: 100%; min-width: unset; } } @media (max-width: 480px) { .cabinet-col-size, .cabinet-col-date { display: none; } .cabinet-file-row { padding: var(--space-2) var(--space-2); } .cabinet-breadcrumb { padding: 4px var(--space-2); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .cabinet-mobile-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); font-size: 10px; } .cabinet-mobile-tab.active { color: var(--color-primary-on-surface); } .cabinet-mobile-tab svg { width: 20px; height: 20px; } }   .modal-overlay { z-index: var(--z-overlay); } .modal-dialog { z-index: var(--z-modal); border-radius: var(--radius-lg); } .cabinet-dialog-overlay { z-index: var(--z-overlay); } .cabinet-dialog { z-index: var(--z-modal); border-radius: var(--radius-lg); animation: modal-scale-in var(--duration-fast) var(--ease-default); }   .ai-panel { position: fixed; } .tool-palette { position: fixed; }   .cabinet-shortcut-help { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; } .cabinet-shortcut-help-card { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; border-radius: 16px; background: var(--color-bg-base); box-shadow: var(--shadow-md); } .cabinet-shortcut-help-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 12px; } .cabinet-shortcut-help-divider { height: 1px; background: var(--color-border-default); margin-bottom: 12px; } .cabinet-shortcut-help-section { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); margin: 12px 0 6px; } .cabinet-shortcut-help-section:first-of-type { margin-top: 0; } .cabinet-shortcut-help-row { display: flex; gap: 8px; margin: 2px 0; } .cabinet-shortcut-help-key { flex: 0 0 100px; font-size: var(--font-xs); color: var(--color-text-secondary); } .cabinet-shortcut-help-desc { flex: 1; font-size: var(--font-xs); color: var(--color-text-primary); } .cabinet-shortcut-help-close { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; } .cabinet-shortcut-help-esc { padding: 2px 6px; border-radius: 4px; background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-tertiary); } .cabinet-shortcut-help-close-text { font-size: var(--font-xs); color: var(--color-text-disabled); }     .cabinet-address-bar.is-path { flex: 1 1 180px !important; min-width: 180px; } .cabinet-address-path { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: var(--font-xs); color: var(--color-text-primary); padding: 3px 4px; } .cabinet-address-path.is-error { color: var(--color-error); }     .cabinet-kindfilter { position: relative; display: inline-flex; } .cabinet-kindfilter-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border: 1px solid var(--color-border-default); border-radius: 5px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .cabinet-kindfilter-btn:hover { background: var(--color-bg-sunken); } .cabinet-kindfilter-btn.active { border-color: var(--color-primary); color: var(--color-primary-on-surface); } .cabinet-kindfilter-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cabinet-kindfilter-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1100; width: 220px; padding: 4px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .cabinet-kindfilter-head { padding: 6px 8px 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .cabinet-kindfilter-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: none; border-radius: 5px; background: none; font-size: var(--font-sm); color: var(--color-text-primary); cursor: pointer; text-align: left; } .cabinet-kindfilter-row:hover { background: var(--color-bg-sunken); } .cabinet-kindfilter-check { width: 14px; color: var(--color-primary-on-surface); } .cabinet-kindfilter-sep { height: 1px; margin: 4px 10px; background: var(--color-border-default); } .cabinet-kindfilter-reset { width: 100%; padding: 6px 8px; border: none; border-radius: 5px; background: none; font-size: var(--font-xs); color: var(--color-text-secondary); cursor: pointer; text-align: left; } .cabinet-kindfilter-reset:hover { background: var(--color-bg-sunken); }   .cabinet-viewmode { position: relative; display: inline-flex; } .cabinet-viewmode-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border: 1px solid var(--color-border-default); border-radius: 5px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .cabinet-viewmode-btn:hover { background: var(--color-bg-sunken); } .cabinet-viewmode-label { color: var(--color-text-secondary); }   .cabinet-viewmode-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1100; width: 280px; padding: 4px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .cabinet-viewmode-menu::before { content: ""; display: block; height: 2px; margin: -4px -4px 4px; border-radius: 8px 8px 0 0; background: var(--color-primary); } .cabinet-viewmode-row { display: grid; grid-template-columns: 14px 22px 1fr auto auto; align-items: center; gap: 0 2px; width: 100%; padding: 6px 8px; border: none; border-radius: 5px; background: none; cursor: pointer; text-align: left; } .cabinet-viewmode-row:hover, .cabinet-viewmode-row:focus-visible { background: var(--color-bg-sunken); }   .cabinet-viewmode-row.is-focused { background: var(--color-bg-sunken); outline: 2px solid var(--color-primary); outline-offset: -2px; }   .cabinet-viewmode-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; } .cabinet-viewmode-row.is-current .cabinet-viewmode-dot { background: var(--color-primary); } .cabinet-viewmode-row-label { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cabinet-viewmode-row-key { font-size: var(--font-sm); color: var(--color-text-secondary); } .cabinet-viewmode-row-shortcut { margin-left: 24px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .cabinet-viewmode-sep { height: 1px; margin: 4px 10px; background: var(--color-border-default); } .cabinet-file-list.is-mode-tile .cabinet-file-header, .cabinet-file-list.is-mode-mediumicon .cabinet-file-header, .cabinet-file-list.is-mode-largeicon .cabinet-file-header { display: none; }   .cabinet-file-list.is-mode-mediumicon { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0; padding: 5px 0; } .cabinet-file-list.is-mode-mediumicon .cabinet-file-row { flex: 0 0 96px; width: 96px; min-height: 0; margin: 2px; padding: 8px 6px; flex-direction: column; align-items: center; text-align: center; border: 1px solid transparent; border-radius: 6px; } .cabinet-file-list.is-mode-mediumicon .cabinet-col-date, .cabinet-file-list.is-mode-mediumicon .cabinet-col-type, .cabinet-file-list.is-mode-mediumicon .cabinet-col-size, .cabinet-file-list.is-mode-mediumicon .cabinet-col-folder { display: none; } .cabinet-file-list.is-mode-mediumicon .cabinet-file-icon { width: 48px; height: 48px; margin-bottom: 6px; } .cabinet-file-list.is-mode-mediumicon .cabinet-col-name { flex-direction: column; gap: var(--space-1); width: 100%; min-width: 0; } .cabinet-file-list.is-mode-mediumicon .cabinet-file-name { white-space: normal; overflow-wrap: anywhere; overflow: hidden; text-overflow: clip;   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cabinet-file-list.is-mode-tile { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0; padding: 5px 0; } .cabinet-file-list.is-mode-tile .cabinet-file-row { flex: 0 0 230px; width: 230px; min-height: 0; margin: 2px; padding: 8px; border: 1px solid transparent; border-radius: 6px; } .cabinet-file-list.is-mode-tile .cabinet-file-icon { width: 36px; height: 36px; margin-right: 10px; } .cabinet-file-list.is-mode-tile .cabinet-col-size { display: none; } .cabinet-file-list.is-mode-tile .cabinet-file-name { font-weight: var(--weight-semibold); }   .cabinet-tile-meta { display: block; font-size: var(--font-2xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .cabinet-file-list.is-mode-tile .cabinet-col-date, .cabinet-file-list.is-mode-tile .cabinet-col-type { display: none; } .cabinet-file-list.is-mode-largeicon { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0; padding: 5px 0; } .cabinet-file-list.is-mode-largeicon .cabinet-file-row { flex: 0 0 132px; width: 132px; min-height: 0; margin: 2px; padding: 10px 8px 8px; flex-direction: column; align-items: center; text-align: center; border: 1px solid transparent; border-radius: 6px; }   .cabinet-file-list.is-mode-largeicon .cabinet-file-row.selected, .cabinet-file-list.is-mode-mediumicon .cabinet-file-row.selected, .cabinet-file-list.is-mode-tile .cabinet-file-row.selected { border-color: var(--color-primary); } .cabinet-file-list.is-mode-largeicon .cabinet-file-row.is-caret, .cabinet-file-list.is-mode-mediumicon .cabinet-file-row.is-caret, .cabinet-file-list.is-mode-tile .cabinet-file-row.is-caret { border-color: var(--color-primary); } .cabinet-file-list.is-mode-largeicon .cabinet-col-date, .cabinet-file-list.is-mode-largeicon .cabinet-col-type, .cabinet-file-list.is-mode-largeicon .cabinet-col-size, .cabinet-file-list.is-mode-largeicon .cabinet-col-folder { display: none; } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon { width: 88px; height: 88px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon .cabinet-file-appicon, .cabinet-file-list.is-mode-largeicon .cabinet-file-icon .folder-glyph { width: 72px; height: 72px; }   .cabinet-file-list.is-mode-largeicon .cabinet-file-icon.has-thumb { width: 88px; height: 88px; position: relative; } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon.has-thumb .cabinet-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px; border: 1px solid var(--color-border-default); border-radius: 3px; background: var(--color-bg-base); } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon.has-thumb canvas.cabinet-file-thumb { visibility: hidden; } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon.has-thumb.thumb-ready canvas.cabinet-file-thumb { visibility: visible; } .cabinet-file-list.is-mode-largeicon .cabinet-file-icon.has-thumb.thumb-ready .cabinet-file-appicon { display: none; }   .cabinet-file-list.is-mode-largeicon .cabinet-file-checkbox, .cabinet-file-list.is-mode-mediumicon .cabinet-file-checkbox { display: none; } .cabinet-file-list.is-mode-largeicon .cabinet-col-name { flex-direction: column; gap: var(--space-2); width: 100%; min-width: 0; }   .cabinet-file-list.is-mode-tile .cabinet-col-name { flex: 1; min-width: 0; } .cabinet-file-list.is-mode-tile .cabinet-col-size { width: auto; flex: 0 0 auto; }   .cabinet-file-list.is-mode-tile .cabinet-file-name, .cabinet-file-list.is-mode-largeicon .cabinet-file-name { white-space: normal; overflow-wrap: anywhere; overflow: hidden; text-overflow: clip;   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   .cabinet-preview-empty { align-items: center; justify-content: center; } .cabinet-preview-empty-body { max-width: 340px; margin: 20px; text-align: center; } .cabinet-preview-empty-iconbox { width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); color: var(--color-text-tertiary); display: flex; align-items: center; justify-content: center; } .cabinet-preview-empty-title { margin-top: 12px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cabinet-preview-empty-rows { display: inline-grid; grid-template-columns: auto auto; gap: 4px 10px; margin-top: 12px; align-items: center; } .cabinet-preview-empty-key { text-align: right; font-size: var(--font-xs); color: var(--color-text-tertiary); } .cabinet-preview-empty-desc { text-align: left; font-size: var(--font-xs); color: var(--color-text-secondary); } .cabinet-preview-empty-kbd { justify-self: end; padding: 0 5px; border-radius: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-bottom-width: 2px; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .cabinet-preview-keep-hint { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 6px 10px; border-radius: 6px; background: var(--color-primary-surface-light); border: 1px solid var(--color-primary); } .cabinet-preview-keep-hint-text { flex: 1; font-size: var(--font-xs); color: var(--color-text-primary); } .cabinet-preview-keep-hint-ok { padding: 3px 10px; border: none; border-radius: 5px; background: var(--color-primary); color: #fff; font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; } .cabinet-pdf-tab-badge { margin-left: 6px; padding: 0 3px; border: 1px solid var(--color-primary); border-radius: 3px; color: var(--color-primary-on-surface); font-size: var(--font-2xs); } .cabinet-pdf-tab-keep { margin-left: 4px; padding: 0 4px; border-radius: 3px; color: var(--color-primary-on-surface); font-size: var(--font-2xs); font-weight: var(--weight-semibold); cursor: pointer; } .cabinet-pdf-tab-keep:hover { background: var(--color-bg-sunken); }   .cabinet-tree-theme-badge { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; font-size: 8px; font-weight: var(--weight-bold); } .cabinet-tree-theme-badge.is-invalid { background: var(--color-error); color: var(--color-white); } .cabinet-tree-theme-badge.is-lock { background: var(--color-bg-base); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); }   .cabinet-status-refresh.is-rotating svg { animation: spin 1s linear infinite; }   .cabinet-pdf-tab-close { margin-left: 4px; opacity: 0.7; font-size: 10px; visibility: hidden; } .cabinet-pdf-tab.btn-primary .cabinet-pdf-tab-close, .cabinet-pdf-tab:hover .cabinet-pdf-tab-close { visibility: visible; }   .cabinet-pdf-tab.is-dirty::after { content: "●"; margin-left: 3px; font-size: 8px; color: var(--color-warning); }   .cabinet-pdf-tab-panel { height: 100%; } .cabinet-pdf-tab-panel[hidden] { display: none; }   .cabinet-progress-cancel { margin-top: var(--space-3); } .btn.is-preview-tab { font-style: italic; }   .btn-primary.is-preview-tab .cabinet-pdf-tab-badge { color: #fff; border-color: #fff; } .btn-primary.is-preview-tab .cabinet-pdf-tab-keep { color: #fff; } .btn-primary.is-preview-tab .cabinet-pdf-tab-keep:hover { background: rgba(255,255,255,0.18); }   .xtr-dialog { max-width: min(1100px, 94vw); width: min(1100px, 94vw); max-height: 88vh; display: flex; flex-direction: column; position: relative; } .xtr-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 10px 10px 0 0; background: var(--color-primary-surface); } .xtr-head-title { flex: 1 1 auto; font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .xtr-subhead { padding: 5px 16px; font-size: var(--font-xs); color: var(--color-text-secondary); background: var(--color-primary-surface-light); } .xtr-body { flex: 1 1 auto; display: flex; gap: 12px; min-height: 0; padding: 10px; } .xtr-col-left { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .xtr-col-right { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .xtr-step-title { white-space: pre-line; font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .xtr-pages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; } .xtr-page { width: 180px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; padding: 4px; } .xtr-page.is-named { background: var(--color-bg-sunken); } .xtr-page.is-sel { border: 2px solid var(--color-primary); } .xtr-page-top { display: flex; align-items: center; gap: 4px; } .xtr-page-no { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; background: var(--color-text-tertiary); color: var(--color-text-on-primary); font-size: var(--font-xs); display: inline-flex; align-items: center; justify-content: center; } .xtr-page-name { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: var(--font-xs); color: var(--color-text-primary); outline: none; } .xtr-page-same { flex: 0 0 auto; } .xtr-page-thumb { width: 100%; margin-top: 4px; border: 1px solid var(--color-border-default); } .xtr-foot { display: flex; justify-content: flex-end; } .xtr-name-row { display: flex; align-items: center; gap: 4px; } .xtr-name-input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-md); background: var(--color-bg-base); color: var(--color-text-primary); } .xtr-name-clear { border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .xtr-suggest { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow-y: auto; } .xtr-suggest-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; background: transparent; cursor: pointer; text-align: left; } .xtr-suggest-row:hover { background: var(--color-bg-sunken); } .xtr-suggest-name { font-size: var(--font-lg); color: var(--color-text-primary); } .xtr-suggest-dots { display: inline-flex; gap: 2px; } .xtr-suggest-tail { font-size: var(--font-xs); color: var(--color-text-tertiary); } .xtr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-text-tertiary); color: var(--color-text-on-primary); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; } .xtr-dot-lg { width: 25px; height: 25px; font-size: var(--font-xs); } .xtr-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .xtr-link { border: 0; background: transparent; cursor: pointer; padding: 2px 3px; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-tertiary); } .xtr-link:hover { background: var(--color-primary-surface); } .xtr-preview { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--color-text-primary); border-radius: var(--radius-md); overflow: hidden; } .xtr-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .xtr-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .xtr-nav-prev { left: 8px; color: var(--color-primary-on-surface); } .xtr-nav-next { right: 8px; } .xtr-nav:disabled { display: none; } .xtr-docs { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .xtr-doc { border: 1px solid var(--color-primary-surface); border-radius: var(--radius-md); padding: 6px 8px; cursor: pointer; } .xtr-doc.is-sel { background: var(--color-primary-surface); } .xtr-doc-head { display: flex; align-items: center; gap: 6px; } .xtr-doc-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-sm); color: var(--color-text-primary); } .xtr-doc-done { color: var(--color-primary-on-surface); } .xtr-doc-done-text { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .xtr-doc-pick { flex: 0 0 auto; } .xtr-doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .xtr-doc-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .xtr-doc-head-right { display: flex; align-items: center; gap: 4px; justify-content: center; } .xtr-filing { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; } .xtr-preview-filing { flex: 1 1 auto; } .xtr-filing-pages { width: 100px; flex: 0 0 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .xtr-filing-page { border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .xtr-filing-page-label { font-size: var(--font-xs); color: var(--color-text-secondary); } .xtr-filing-page-title { font-size: var(--font-xs); color: var(--color-text-secondary); text-align: center; word-break: break-all; }   .xtr-bind { position: absolute; inset: 0; z-index: 3; background: var(--color-overlay-black-50); display: flex; align-items: center; justify-content: center; } .xtr-bind-card { width: min(800px, 92%); max-height: 88%; overflow-y: auto; padding: 15px 20px 20px; border-radius: 10px; background: var(--color-bg-base); border: 5px solid var(--color-border-default); } .xtr-bind-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .xtr-bind-title { font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-primary); } .xtr-bind-sub { font-size: var(--font-sm); color: var(--color-text-secondary); } .xtr-bind-spacer { flex: 1 1 auto; } .xtr-bind-doc { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .xtr-bind-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 26px; margin-bottom: 10px; } .xtr-bind-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--color-bg-sunken); font-size: var(--font-sm); color: var(--color-text-primary); } .xtr-bind-chip-del { border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .xtr-tree { max-height: 340px; overflow: auto; background: var(--color-bg-sunken); border-radius: var(--radius-md); padding: 6px; } .xtr-tree-row { display: flex; align-items: center; gap: 4px; height: 35px; } .xtr-tree-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); } .xtr-tree-name:hover { background: var(--color-primary-surface); } .xtr-tree-edit { flex: 1 1 auto; height: 30px; font-size: var(--font-xs); } .xtr-tree-menu { width: 30px; border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .xtr-tree-popup { display: inline-flex; flex-direction: column; padding: 4px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); } .xtr-tree-popup-item { padding: 6px 12px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); border-radius: var(--radius-sm); } .xtr-tree-popup-item:hover { background: var(--color-bg-sunken); } .xtr-busy { position: absolute; inset: 0; z-index: 4; border-radius: 20px; background: var(--color-overlay-black-50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .xtr-busy-text { font-size: var(--font-sm); font-weight: var(--weight-bold); text-align: center; color: var(--color-white); }   .xtr-hidden-host { position: absolute; left: -10000px; top: 0; width: 620px; height: 800px; overflow: hidden; pointer-events: none; opacity: 0; }   .sa2-dialog { max-width: min(820px, 94vw); width: min(820px, 94vw); position: relative; } .sa2-body { padding: 20px 30px 10px; } .sa2-cols { display: flex; gap: 40px; } .sa2-form { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 26px; } .sa2-preview { width: 280px; flex: 0 0 280px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .sa2-row { display: flex; align-items: center; gap: 6px; } .sa2-row-icon { flex: 0 0 auto; color: var(--color-text-tertiary); opacity: 0.5; } .sa2-input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-lg); }   .sa2-select { padding: 4px 8px; border: 0; border-radius: var(--radius-md); background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-lg); cursor: pointer; }   .sa2-dialog.is-tracking .modal-header { background: var(--color-feature-tracking); color: var(--color-white); } .sa2-dialog.is-tracking .modal-header .modal-title, .sa2-dialog.is-tracking .modal-header .modal-close { color: var(--color-white); } .sa2-thumb { position: relative; width: 100%; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; min-height: 120px; } .sa2-thumb img { max-width: 100%; } .sa2-thumb-page { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: var(--weight-bold); color: var(--color-primary-on-surface); } .sa2-thumb-nav { position: absolute; top: 4px; right: 2px; display: flex; flex-direction: column; gap: 2px; } .sa2-thumb-btn { border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); opacity: 0.7; } .sa2-thumb-btn:disabled { visibility: hidden; } .sa2-open { font-size: var(--font-sm); color: var(--color-primary-on-surface); cursor: pointer; } .sa2-nopreview { width: 100%; min-height: 120px; padding: 0 20px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-text-tertiary); color: var(--color-white); font-size: var(--font-xs); font-weight: var(--weight-bold); } .sa2-inform-head { font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); margin-bottom: 8px; } .sa2-addr-box { border: 1px solid var(--color-border-default); border-radius: 15px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; } .sa2-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }   .sa2-addr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-2xs); font-weight: var(--weight-semibold); flex: 0 0 18px; }   .sa2-addr-avatar.is-system { border-radius: 4px; background: var(--color-green); padding: 2px; } .sa2-addr-avatar.is-system img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .sa2-addr-entry { position: relative; display: inline-flex; flex: 1 1 120px; min-width: 120px; } .sa2-addr-menu { position: absolute; z-index: 5; margin-top: 22px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .sa2-addr-menu button { display: block; padding: 4px 12px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-primary); } .sa2-addr-menu button:hover { background: var(--color-bg-sunken); } .sa2-addr-candidates { position: absolute; left: 0; top: 100%; z-index: 6; min-width: 260px; max-height: 220px; overflow-y: auto; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .sa2-addr-candidate { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; background: transparent; cursor: pointer; text-align: left; } .sa2-addr-candidate:hover { background: var(--color-bg-sunken); } .sa2-addr-candidate-name { font-size: var(--font-sm); color: var(--color-text-primary); } .sa2-addr-candidate-addr { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sa2-thumb-open { display: block; line-height: 0; cursor: pointer; } .sa2-addr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-sm); } .sa2-addr-del { border: 0; background: transparent; cursor: pointer; color: var(--color-primary-dark); } .sa2-addr-input { flex: 1 1 60px; min-width: 60px; border: 0; outline: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-md); } .sa2-comment { margin-top: 15px; } .sa2-comment-input { width: 100%; min-height: 50px; max-height: 150px; resize: vertical; padding: 5px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-xs); background: var(--color-bg-base); color: var(--color-text-primary); } .sa2-footer { display: flex; align-items: center; justify-content: center; gap: 10px; } .sa2-quit { border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); font-size: var(--font-sm); } .sa2-inform-btn { padding: 10px 28px; } .sa2-busy { position: absolute; inset: 0; z-index: 4; border-radius: 20px; background: var(--color-overlay-black-50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .sa2-busy-text { font-size: var(--font-sm); font-weight: var(--weight-bold); text-align: center; color: var(--color-white); } .xtr-tree-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 4px; } .xtr-tree-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--color-text-tertiary); }   .icard-host { display: flex; flex-direction: column; min-height: 100%; } .icard-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; } .icard-tab { padding: 5px 12px; border-radius: var(--radius-md); font-size: var(--font-sm); cursor: pointer; background: var(--color-bg-elevated); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } .icard-tab.is-selected { background: var(--color-primary-surface); color: var(--color-primary-dark); border-color: var(--color-primary); } .icard-body { flex: 1 1 auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; } .icard-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); } .icard-muted { font-size: var(--font-sm); color: var(--color-text-tertiary); margin: 0; } .icard-banner { border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--font-sm); display: flex; flex-direction: column; gap: 6px; } .icard-banner.is-warning { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .icard-banner.is-neutral { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .icard-banner.is-info { background: var(--color-info-surface); color: var(--color-text-secondary); } .icard-banner-title { font-weight: 600; } .icard-banner-detail { font-size: var(--font-xs); } .icard-blocks { display: flex; flex-direction: column; gap: 16px; } .icard-blocks.is-stale { opacity: 0.7; } .icard-block-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; } .icard-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .icard-stat { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .icard-stat-label { font-size: var(--font-xs); color: var(--color-text-secondary); } .icard-stat-value { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); } .icard-stat.tone-success .icard-stat-value { color: var(--color-success-dark); } .icard-stat.tone-warning { background: var(--color-warning-surface); border-color: var(--color-warning); } .icard-stat.tone-warning .icard-stat-label, .icard-stat.tone-warning .icard-stat-value { color: var(--color-warning-on-surface); } .icard-stat.tone-danger { background: var(--color-error-surface); border-color: var(--color-error); } .icard-stat.tone-danger .icard-stat-label, .icard-stat.tone-danger .icard-stat-value { color: var(--color-error); } .icard-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border-default); font-size: var(--font-sm); } .icard-kv-label { color: var(--color-text-secondary); } .icard-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); } .icard-table th { text-align: left; font-weight: 400; font-size: var(--font-xs); color: var(--color-text-secondary); padding: 4px 6px 6px; } .icard-table td { padding: 7px 6px; border-top: 1px solid var(--color-border-default); color: var(--color-text-primary); } .icard-table td.is-right { text-align: right; } .icard-cell.tone-success { color: var(--color-success-dark); } .icard-cell.tone-warning { color: var(--color-warning-on-surface); } .icard-cell.tone-danger { color: var(--color-error); } .icard-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--font-xs); background: var(--color-bg-sunken); color: var(--color-text-secondary); } .icard-pill.tone-success { background: var(--color-success-surface); color: var(--color-success-dark); } .icard-pill.tone-warning { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .icard-pill.tone-danger { background: var(--color-error-surface); color: var(--color-error); } .icard-notice { border-radius: var(--radius-md); padding: 9px 12px; font-size: var(--font-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); } .icard-notice.tone-success { background: var(--color-success-surface); color: var(--color-success-dark); } .icard-notice.tone-warning { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .icard-notice.tone-danger { background: var(--color-error-surface); color: var(--color-error); } .icard-link { display: block; padding: 3px 0; font-size: var(--font-sm); color: var(--color-primary-dark); text-decoration: none; } .icard-link:hover { text-decoration: underline; } .icard-frame { width: 100%; min-height: 420px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .icard-footer { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .icard-footer-spacer { flex: 1 1 auto; }   .icard-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .icard-row.is-selected { border: 2px solid var(--color-primary); padding: 11px 13px; } .icard-row-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; } .icard-row-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .icard-row-detail { font-size: var(--font-xs); color: var(--color-text-tertiary); } .icard-kind { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; } .icard-hint { margin-left: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .icard-positions { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px 12px; } .icard-secret-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; } .icard-secret-row code { font-size: var(--font-xs); color: var(--color-text-secondary); } .icard-error { color: var(--color-error); font-size: var(--font-xs); margin: 4px 0; } .icard-test { border-top: 1px solid var(--color-border-default); margin-top: 18px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .icard-test-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .icard-test-head .settings-input { width: 260px; } .icard-test-result { display: flex; flex-direction: column; gap: 3px; font-size: var(--font-xs); color: var(--color-text-secondary); } .icard-test-result .tone-success { color: var(--color-success-dark); } .icard-test-result .tone-warning { color: var(--color-warning-on-surface); }   .aiconn-tool { background: var(--color-bg-sunken); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; } .aiconn-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .aiconn-tool-head code { font-size: var(--font-xs); color: var(--color-text-primary); } .aiconn-tool-body { margin-left: 22px; display: flex; flex-direction: column; gap: 6px; } .aiconn-tool-desc { font-size: var(--font-xs); color: var(--color-text-secondary); } .aiconn-tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aiconn-tool-row .settings-input { width: 180px; } 
/*css/screens/21-scanner.css*/
  .scanner-overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:#000; z-index:2000; flex-direction:column; } .scanner-overlay.active { display:flex; } .scanner-header { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; background:rgba(0,0,0,0.8); color:#fff; z-index:10; } .scanner-header .page-count { font-size:0.9rem; }   .scanner-error { display:none; padding:8px 16px; font-size:0.85rem; line-height:1.5; background:var(--color-error-surface); color:var(--color-error-on-surface); } .scanner-error.active { display:block; } .scanner-video-wrap { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#111; } .scanner-video-wrap video { width:100%; height:100%; object-fit:contain; } .scanner-video-wrap canvas.scanner-canvas-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; } .scanner-controls { display:flex; justify-content:center; align-items:center; gap:24px; padding:16px; background:rgba(0,0,0,0.8); } .scanner-btn-capture { width:64px; height:64px; border-radius:50%; background:#fff; border:4px solid #4CAF50; cursor:pointer; transition: transform 0.1s; } .scanner-btn-capture:active { transform:scale(0.9); } .scanner-btn-done { padding:10px 24px; border-radius:8px; background:#4CAF50; color:#fff; border:none; font-size:0.95rem; font-weight:600; cursor:pointer; } .scanner-btn-done:disabled { opacity:0.4; cursor:default; } .scanner-btn-cancel { padding:8px 16px; border-radius:8px; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); font-size:0.85rem; cursor:pointer; } .scanner-review { display:none; position:absolute; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.9); z-index:15; flex-direction:column; align-items:center; justify-content:center; } .scanner-review.active { display:flex; } .scanner-review img { max-width:90%; max-height:70vh; object-fit:contain; border:2px solid #4CAF50; border-radius:4px; } .scanner-review-actions { display:flex; gap:16px; margin-top:16px; } .scanner-review-actions button { padding:10px 24px; border-radius:8px; font-size:0.95rem; cursor:pointer; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.15); color:#fff; } .scanner-review-actions button:last-child { background:#4CAF50; border-color:#4CAF50; font-weight:600; } .scanner-thumbs { display:flex; gap:8px; padding:8px 16px; background:rgba(0,0,0,0.6); overflow-x:auto; max-width:100%; } .scanner-thumbs img { width:48px; height:64px; object-fit:cover; border-radius:4px; border:2px solid transparent; cursor:pointer; } .scanner-thumbs img.active { border-color:#4CAF50; } .scanner-processing { display:none; position:absolute; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.85); z-index:20; flex-direction:column; align-items:center; justify-content:center; color:#fff; } .scanner-processing.active { display:flex; } .scanner-processing .spinner { width:48px;height:48px;border:4px solid rgba(255,255,255,0.2); border-top-color:#4CAF50;border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px; } @keyframes spin { to { transform:rotate(360deg); } }   .mailimport-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border-default); margin-bottom: 4px; } .mailimport-tab { flex: 1; padding: 9px 6px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--color-text-tertiary); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .mailimport-tab:hover { color: var(--color-text-secondary); } .mailimport-tab.active { color: var(--color-mail-receive); border-bottom-color: var(--color-mail-receive); font-weight: 600; } .mailimport-pane { padding: 16px 4px 24px; } .mailimport-lead, .mailimport-hint { margin: 0 0 16px; color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: 1.6; } .mailimport-hint { text-align: center; margin-top: 8px; } .mailimport-address-label { font-size: var(--font-xs); color: var(--color-text-secondary); margin-bottom: 4px; } .mailimport-address-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-mail-receive-surface); margin-bottom: 20px; } .mailimport-address { flex: 1; min-width: 0; font-weight: 600; color: var(--color-text-primary); word-break: break-all; } .mailimport-copy { flex: none; }   .mailimport-steps { margin-bottom: 16px; } .mailimport-step { display: flex; gap: 10px; margin-bottom: 10px; } .mailimport-step-num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-mail-receive); color: #fff; font-size: var(--font-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; } .mailimport-step-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mailimport-step-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.6; }   .mailimport-drop { position: relative; padding: 32px 24px; border: 2px solid var(--color-mail-receive); border-radius: 12px; background: var(--color-bg-sunken); text-align: center; cursor: pointer; margin-bottom: 16px; } .mailimport-drop.dragover { background: var(--color-mail-receive-surface); } .mailimport-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .mailimport-drop-icon { width: 32px; height: 32px; color: var(--color-mail-receive); margin-bottom: 12px; } .mailimport-drop-text { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mailimport-drop-sub { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .mailimport-file-card { padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); margin-bottom: 12px; } .mailimport-file-name { font-weight: 600; word-break: break-all; } .mailimport-file-meta { font-size: var(--font-xs); color: var(--color-text-tertiary); } .mailimport-send { width: 100%; }   .mailimport-capture { margin-bottom: 20px; } .mailimport-status { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); } .mailimport-status.error { color: var(--color-error); }   .mailimport-corrector-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: var(--color-overlay-black-50); } .mailimport-corrector { display: flex; flex-direction: column; width: min(700px, calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); border-radius: var(--radius-lg); background: var(--color-bg-base); overflow: hidden; } .mailimport-corrector-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--color-border-default); } .mailimport-corrector-head h3 { margin: 0; font-size: var(--font-md); font-weight: var(--weight-semibold); } .mailimport-corrector-status { font-size: var(--font-sm); color: var(--color-text-tertiary); text-align: right; } .mailimport-corrector-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); } .mailimport-corrector-img { max-width: 95%; max-height: 90%; object-fit: contain; } .mailimport-corrector-img.is-loading { visibility: hidden; } .mailimport-corrector-spinner { position: absolute; } .mailimport-corrector-actions { display: flex; justify-content: center; gap: 12px; padding: 16px; border-top: 1px solid var(--color-border-default); }   .pdfed-seal-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; background: var(--color-overlay-black-50); } .pdfed-seal { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--color-bg-base); } .pdfed-seal-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--color-border-default); } .pdfed-seal-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: var(--weight-semibold); } .pdfed-seal-print { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .pdfed-seal-print:hover { background: var(--color-primary-surface-light); }   .pdfed-seal-addresslabel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-feature-tracking); border-radius: var(--radius-md); background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .pdfed-seal-addresslabel:hover { filter: brightness(0.97); } .pdfed-seal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; } .pdfed-seal-close:hover { background: var(--color-bg-sunken); } .pdfed-seal-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }   .mailimport-qr-section { text-align: center; margin-bottom: 8px; } .mailimport-qr-frame { width: 180px; height: 180px; margin: 0 auto 8px; padding: 10px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; } .mailimport-qr { max-width: 100%; max-height: 100%; } .mailimport-qr-placeholder { font-size: var(--font-xs); color: var(--color-text-tertiary); } .mailimport-qr-url { font-size: var(--font-xs); color: var(--color-text-secondary); word-break: break-all; } .mailimport-app-section { margin-top: 20px; padding: 12px 16px; border-radius: 8px; background: var(--color-bg-sunken); } .mailimport-app-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; } .mailimport-app-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-bottom: 8px; line-height: 1.6; } .mailimport-app-recommend { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); }   .mailimport-guide-label { margin: 16px 0 8px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mailimport-guide { padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); margin-bottom: 8px; } .mailimport-guide-maker { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; } .mailimport-guide-lines { margin: 0 0 6px; padding-left: 1.1em; font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.7; } .mailimport-guide-link { font-size: var(--font-xs); color: var(--color-mail-receive); } .mailimport-note { margin: 8px 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.6; }   .mailimport-afterflow { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--color-mail-receive-surface); } .mailimport-afterflow-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-mail-receive-dark); margin-bottom: 6px; } .mailimport-afterflow-flow { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .mailimport-afterflow-note { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); line-height: 1.6; }   .nav-tool-icon[data-tool="mailimport"] .nav-tool-glyph { background: var(--color-mail-receive-surface); color: var(--color-mail-receive); } .nav-tool-icon[data-tool="mailimport"]:hover .nav-tool-glyph { background: var(--color-mail-receive); color: #fff; }   .feature-page .mailimport { max-width: 710px; margin: 0 auto; }   .pdf-landing { position: relative; min-height: 420px; } .pdf-landing-card { width: 600px; max-width: 100%; margin: 0 auto; padding: 28px 32px; border: 1px solid var(--color-border-default); border-radius: 18px; background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); } .pdf-landing-title { margin: 0; text-align: center; font-size: var(--font-xl); font-weight: 600; color: var(--color-text-primary); } .pdf-landing-sub { margin: 4px 0 0; text-align: center; font-size: var(--font-sm); color: var(--color-text-secondary); } .pdf-landing-open { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin: 18px auto 4px; padding: 0 22px; border: none; border-radius: 22px; background: var(--color-primary); color: #fff; font-size: var(--font-md); font-weight: 600; cursor: pointer; } .pdf-landing-open:hover { background: var(--color-primary-dark); } .pdf-landing-open svg { width: 18px; height: 18px; } .pdf-landing-drop-hint { margin: 0; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .pdf-landing-history-head { display: flex; align-items: center; justify-content: flex-end;   min-height: 4px; margin: 18px 0 6px; } .pdf-landing-clear { padding: 2px 6px; border: none; border-radius: 6px; background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .pdf-landing-clear:hover { background: var(--color-bg-sunken); } .pdf-landing-list { max-height: 320px; overflow-y: auto; } .pdf-landing-row { position: relative; display: flex; align-items: center; } .pdf-landing-row-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: none; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer; } .pdf-landing-row-main:hover { background: var(--color-bg-sunken); } .pdf-landing-row-icon { width: 18px; height: 18px; flex: none; color: var(--color-text-tertiary); margin-top: 1px; } .pdf-landing-row-texts { flex: 1; min-width: 0; } .pdf-landing-row-name { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdf-landing-row-sub { display: block; margin-top: 1px; font-size: var(--font-2xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdf-landing-row-time { flex: none; margin-left: 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .pdf-landing-row-del { flex: none; width: 28px; height: 28px; margin-left: 2px; border: none; border-radius: 50%; background: transparent; color: var(--color-text-tertiary); font-size: 15px; cursor: pointer; } .pdf-landing-row-del:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .pdf-landing-empty { padding: 18px 0; text-align: center; } .pdf-landing-empty-title { margin: 0; font-size: var(--font-sm); color: var(--color-text-secondary); } .pdf-landing-empty-sub { margin: 3px auto 0; max-width: 360px; font-size: var(--font-2xs); color: var(--color-text-tertiary); line-height: 1.6; } .pdf-landing-notice { margin: 10px 0 0; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .pdf-landing-dropzone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--color-primary); border-radius: 18px; background: var(--color-primary-surface-light); pointer-events: none; } .pdf-landing-dropzone-text { font-size: var(--font-lg); font-weight: 600; color: var(--color-primary-on-surface); }   .nav-tool-icon[data-tool="openpdf"] .nav-tool-glyph { background: var(--color-feature-file-surface); color: var(--color-feature-file); } .nav-tool-icon[data-tool="openpdf"]:hover .nav-tool-glyph { background: var(--color-feature-file); color: #fff; }   .docsearch { display: flex; flex-direction: column; height: 100%; min-height: 420px; } .docsearch-head { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; } .docsearch-head-icon { width: 18px; height: 18px; color: var(--color-text-secondary); } .docsearch-head-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); }   .docsearch-move-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--color-bg-sunken); cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .docsearch-move-toggle:hover { background: var(--color-border-default); }   .docsearch-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--color-text-secondary); } .docsearch-close:hover { background: var(--color-bg-sunken); }   .docsearch-move { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: -12px; } .docsearch-move-guide { padding: 8px 12px; border-bottom: 1px solid var(--color-border-default); background: var(--color-primary-surface-light); font-size: var(--font-xs); color: var(--color-text-secondary); } .docsearch-move-filter { display: flex; align-items: center; gap: 6px; margin: 8px 8px 0; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-tertiary); } .docsearch-move-filter-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--font-xs); color: var(--color-text-primary); } .docsearch-tree { flex: 1; min-height: 0; overflow: auto; margin: 4px; } .docsearch-tree-row { display: flex; align-items: center; gap: 6px; padding: 5px 2px; border-radius: 4px; } .docsearch-tree-row.is-drop { background: var(--color-primary-muted); } .docsearch-tree-expander { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); } .docsearch-tree-avatar { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-white); } .docsearch-tree-label { font-size: var(--font-xs); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docsearch-tree-folder-icon { flex: 0 0 auto; color: var(--color-text-secondary); } .docsearch-tree-empty { padding: 5px 2px 5px 22px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .docsearch-body { display: flex; gap: 16px; flex: 1; min-height: 0; }   .docsearch-left { flex: 0 0 340px; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .docsearch-right { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 12px; }   .docsearch-box { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--color-border-default); border-radius: 18px; background: var(--color-bg-base); } .docsearch-box-icon { width: 16px; height: 16px; flex: none; color: var(--color-text-tertiary); } .docsearch-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); outline: none; }   .docsearch-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .docsearch-chip { border: 1px solid var(--color-border-default); background: var(--color-bg-sunken); color: var(--color-text-secondary); border-radius: 12px; padding: 3px 11px; font-size: 11px; cursor: pointer; } .docsearch-chip.on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; } .docsearch-chip-gap { width: 8px; } .docsearch-more { display: block; margin: 6px auto 10px; border: 1px solid var(--color-border-default); background: var(--color-bg-elevated); color: var(--color-text-primary); border-radius: 7px; padding: 6px 16px; font-size: 12px; cursor: pointer; } .docsearch-more:hover { background: var(--color-bg-sunken); } .docsearch-status { margin: 8px 0 8px 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); min-height: 1em; } .docsearch-results { flex: 1; min-height: 0; overflow-y: auto; } .docsearch-card { display: block; width: 100%; padding: 8px 10px; margin-bottom: 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer; } .docsearch-card:hover { background: var(--color-bg-sunken); } .docsearch-card.selected { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .docsearch-card-title { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docsearch-card-meta { display: block; margin-top: 1px; font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docsearch-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .docsearch-empty-icon { width: 48px; height: 48px; opacity: .5; color: var(--color-text-tertiary); } .docsearch-empty-title { margin: 12px 0 0; font-size: var(--font-base); font-weight: 600; color: var(--color-text-secondary); } .docsearch-empty-hint { margin: 4px auto 0; max-width: 320px; font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.6; } .docsearch-preview-idle { margin: auto; font-size: var(--font-sm); color: var(--color-text-tertiary); text-align: center; } .docsearch-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .docsearch-preview-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docsearch-preview-unsupported { margin: auto; text-align: center; font-size: var(--font-sm); color: var(--color-text-secondary); }   .nav-tool-icon[data-tool="documentsearch"] .nav-tool-glyph { background: var(--color-feature-file-surface); color: var(--color-feature-file); } .nav-tool-icon[data-tool="documentsearch"]:hover .nav-tool-glyph { background: var(--color-feature-file); color: #fff; }   .flauncher { display: flex; flex-direction: column; height: 100%; min-height: 420px; } .flauncher-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-default); } .flauncher-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); } .flauncher-sub { margin-top: 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .flauncher-search { display: flex; align-items: center; gap: 8px; flex: 0 0 260px; height: 32px; padding: 0 12px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-base); } .flauncher-search-icon { width: 15px; height: 15px; flex: none; color: var(--color-text-tertiary); } .flauncher-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); outline: none; } .flauncher-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0; } .flauncher-section { margin-bottom: 18px; } .flauncher-section-title { margin-bottom: 8px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .flauncher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }   .flauncher-tile-wrap { position: relative; } .flauncher-pin { position: absolute; top: 6px; right: 6px; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0.28; } .flauncher-pin.is-pinned { opacity: 1; } .flauncher-pin:hover { opacity: 0.75; } .flauncher-tile {   display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); text-align: left; cursor: pointer; } .flauncher-tile:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); }   .flauncher-tile-icon { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }   .flauncher-tile-icon.is-create::after { content: "+"; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 10px; line-height: 12px; text-align: center; font-weight: 700; border: 1.5px solid var(--color-bg-elevated); } .flauncher-tile-text { min-width: 0; } .flauncher-tile-title { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .flauncher-tile-sub { display: block; margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); line-height: 1.5; }   .flauncher-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; } .flauncher-tile.is-compact { gap: 8px; padding: 5px 8px; } .flauncher-tile.is-compact .flauncher-tile-icon { width: 24px; height: 24px; border-radius: 6.5px; } .flauncher-tile.is-compact .flauncher-tile-title { overflow: hidden; font-size: var(--font-xs); text-overflow: ellipsis; white-space: nowrap; } .flauncher-foot { padding-top: 10px; border-top: 1px solid var(--color-border-default); font-size: var(--font-2xs); color: var(--color-text-tertiary); text-align: center; }   .nav-tool-icon[data-tool="featurelauncher"] .nav-tool-glyph { background: var(--color-primary-surface-light); color: var(--color-primary-dark); } .nav-tool-icon[data-tool="featurelauncher"]:hover .nav-tool-glyph { background: var(--color-primary); color: #fff; }   .scr-doc-actions { display: flex; align-items: center; gap: 12px; margin: 6px 0; } .scr-link-btn { padding: 0; border: none; background: none; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .scr-link-btn:hover { text-decoration: underline; } .scr-file-input { display: none; } .scr-recent-title { margin: 6px 0 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .scr-recent-list { display: flex; flex-wrap: wrap; gap: 4px; } .scr-recent-item { padding: 2px 8px; border: 1px solid var(--color-border-default); border-radius: 9px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .scr-recent-item:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); }   .scr-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; } .scr-manual-doc { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .scr-manual-doc-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); } .scr-manual-doc-input { flex: 1; min-width: 0; }   .toast-body { flex: 1; min-width: 0; } .toast-kind { display: block; font-size: var(--font-2xs); font-weight: 600; opacity: .8; } .toast-more { display: block; margin-top: 2px; font-size: var(--font-2xs); opacity: .7; } .toast-action { flex: none; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: .7; } .toast-action:hover { opacity: 1; background: rgba(0,0,0,.08); } .toast-action svg { width: 14px; height: 14px; }   .toast-action.is-pinned { opacity: 1; color: var(--color-warning); } .toast-action.is-pinned svg { fill: currentColor; }   .toast-item.is-pinned::after, .toast-item.is-pinned .toast-progress-fill { animation-play-state: paused; }   .toast-mute { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 4px; padding: 4px 0; border: none; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-xs); cursor: pointer; } .toast-mute:hover { color: var(--color-text-secondary); text-decoration: underline; }   .toast-ctas { display: flex; gap: 8px; margin-top: 6px; } .toast-cta { padding: 3px 10px; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font-size: var(--font-2xs); font-weight: 600; cursor: pointer; opacity: .85; } .toast-cta:hover { opacity: 1; } .toast-close-all { align-self: flex-end; margin-top: 4px; padding: 2px 10px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .toast-close-all:hover { border-color: var(--color-primary); }   .toast-item.toast-incoming { display: block; width: 360px; min-width: 0; max-width: calc(100vw - 32px); padding: 10px 12px 8px 16px; border: 1px solid var(--color-border-muted); border-radius: 8px; cursor: pointer; } .toast-item.toast-incoming::after { display: none; }   .toast-item.toast-incoming::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--color-primary); } .toast-item.toast-incoming .toast-progress-fill { color: var(--color-primary-on-surface); opacity: 1; } .toast-item.toast-nudge-red { border-color: var(--color-error); } .toast-item.toast-nudge-red::before, .toast-item.toast-nudge-red .toast-progress-fill { background: var(--color-error); } .toast-item.toast-nudge-amber { border-color: var(--color-warning); } .toast-item.toast-nudge-amber::before, .toast-item.toast-nudge-amber .toast-progress-fill { background: var(--color-warning); }   .toast-item.toast-incoming:hover .toast-progress-fill, .toast-item.toast-incoming.is-waiting .toast-progress-fill { animation-play-state: paused; } .toast-in-head { display: flex; align-items: flex-start; gap: 0; margin-bottom: 8px; } .toast-in-avatar { flex: none; width: 36px; height: 36px; margin-right: 10px; display: flex; align-items: center; justify-content: center; } .toast-in-avatar-img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--color-bg-base); } .toast-in-avatar-initial { width: 36px; height: 36px; border-radius: 4px; background: var(--color-primary-surface); color: var(--color-primary-on-surface);   font-size: var(--font-base); font-weight: 700; display: flex; align-items: center; justify-content: center; } .toast-in-nudge-icon { width: 36px; height: 36px; border-radius: 18px; border: 1.5px solid var(--color-error); background: var(--color-error-surface); font-size: var(--font-md); display: flex; align-items: center; justify-content: center; } .toast-nudge-amber .toast-in-nudge-icon { border-color: var(--color-warning); background: var(--color-warning-surface); } .toast-in-who { flex: 1; min-width: 0; align-self: center; } .toast-in-sender { display: block; font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast-in-meta { display: flex; align-items: center; margin-top: 2px; min-width: 0; } .toast-in-nudge-chip { flex: none; margin-right: 4px; padding: 1px 8px; border-radius: 9px; background: var(--color-error-surface); color: var(--color-error-on-surface); font-size: var(--font-2xs); font-weight: 700; } .toast-nudge-amber .toast-in-nudge-chip { background: var(--color-warning-surface); color: var(--color-warning-dark); }   .toast-in-kind { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--color-border-default); border-radius: 4px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-2xs); font-weight: 600; } .toast-in-kind-chat, .toast-in-kind-direct { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .toast-in-kind-email { border-color: var(--color-info); color: var(--color-info); } .toast-in-kind-slack { border-color: var(--color-slack-brand); color: var(--color-slack-brand); }   .toast-in-kind-phone { border-color: var(--color-feature-phone); color: var(--color-feature-phone); }   .toast-in-cc { flex: none; margin-left: 4px; padding: 1px 5px; border: 1px solid var(--color-border-default); border-radius: 4px; color: var(--color-text-tertiary); font-size: var(--font-2xs); } .toast-in-title { min-width: 0; margin-left: 4px; color: var(--color-text-tertiary); font-size: var(--font-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .toast-in-priority { flex: none; margin: 0 6px; padding: 2px 6px; border: 1px solid var(--color-error); border-radius: 4px; color: var(--color-error); font-size: var(--font-2xs); font-weight: 700; } .toast-in-time { flex: none; margin: 2px 0 0 6px; color: var(--color-text-tertiary); font-size: var(--font-xs); } .toast-incoming .toast-action, .toast-incoming .toast-close { width: 26px; height: 26px; margin-top: 0; border-radius: 4px; }   .toast-incoming .toast-in-hover { visibility: hidden; } .toast-incoming:hover .toast-in-hover, .toast-incoming .toast-in-hover.is-pinned { visibility: visible; } .toast-in-body { margin-bottom: 8px; } .toast-in-message { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 66px; line-height: 22px; white-space: pre-line; font-size: var(--font-base); color: var(--color-text-secondary); } .toast-in-body .toast-more { color: var(--color-text-tertiary); font-size: var(--font-xs); opacity: 1; }   .toast-in-duebar { display: inline-block; margin-top: 6px; padding: 5px 9px; border-radius: 6px; background: var(--color-error-surface); color: var(--color-error-on-surface); font-size: var(--font-xs); font-weight: 700; } .toast-nudge-amber .toast-in-duebar { background: var(--color-warning-surface); color: var(--color-warning-dark); }   .toast-in-group { display: inline-block; margin: 0 8px 6px 0; padding: 3px 8px; border-radius: 4px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); } .toast-in-actions { display: flex; flex-wrap: wrap; margin: 4px 0; } .toast-in-action { margin-right: 6px; padding: 5px 10px; border: none; border-radius: 6px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .toast-in-action:hover { background: var(--color-bg-elevated); } .toast-in-foot { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .toast-in-foot .toast-mute { width: auto; margin-top: 0; }   .toast-center-bell {   position: fixed;   bottom: 44px; right: 16px; width: 32px; height: 32px; padding: 0; border: none; border-radius: 16px; background: transparent; font-size: var(--font-md); line-height: 1; cursor: pointer;   z-index: 1199; } .toast-center-bell:hover { background: var(--color-bg-sunken); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .toast-center-bell { bottom: 98px; } } .toast-center-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--color-error); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: 700; line-height: 16px; text-align: center; } .toast-center-overlay { position: fixed; inset: 0; background: var(--color-overlay-black-30);   z-index: 1200; } .toast-center-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; display: flex; flex-direction: column; background: var(--color-bg-base); box-shadow: -4px 0 32px rgba(0, 0, 0, .2); z-index: 1201; animation: toast-center-slide var(--duration-normal) ease; } @keyframes toast-center-slide { from { transform: translateX(400px); } to { transform: translateX(0); } } .toast-center-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; } .toast-center-title { font-size: var(--font-lg); font-weight: 600; color: var(--color-text-primary); } .toast-center-clear { padding: 4px 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .toast-center-clear:hover { background: var(--color-bg-sunken); } .toast-center-search { padding: 0 16px 8px; } .toast-center-search-input { width: 100%; padding: 6px 8px; border: none; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-xs); } .toast-center-filters { display: flex; gap: 4px; padding: 0 16px 8px; } .toast-center-filter { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); cursor: pointer; } .toast-center-list { flex: 1; min-height: 0; overflow-y: auto; } .toast-center-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; } .toast-center-item.is-read { opacity: .6; } .toast-center-item:hover { background: var(--color-bg-sunken); } .toast-center-item-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; color: var(--color-text-on-primary); } .toast-center-icon-success { background: var(--color-success); } .toast-center-icon-error { background: var(--color-error); } .toast-center-icon-warning { background: var(--color-warning); } .toast-center-icon-info { background: var(--color-feature-message); } .toast-center-item-body { flex: 1; min-width: 0; } .toast-center-item-message { display: block; font-size: var(--font-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; } .toast-center-item-time { flex: none; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .toast-center-stats { padding: 8px 16px; background: var(--color-bg-sunken); color: var(--color-text-tertiary); font-size: var(--font-xs); }     .quote-detail-panel { margin-top: 4px; padding: 10px 12px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); } .qdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .qdp-title { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); } .quote-detail-copy { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 10px; cursor: pointer; background: var(--color-bg-base); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); } .qdp-grid { display: grid; grid-template-columns: max-content 1fr; column-gap: 8px; row-gap: 2px; margin: 0; } .qdp-grid dt { font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); } .qdp-grid dd { margin: 0; font-size: 10px; font-family: Consolas, monospace; color: var(--color-text-secondary); overflow-wrap: anywhere; }   .quote-header-toggle { display: flex; align-items: stretch; gap: 8px; margin: 4px 0; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; cursor: pointer; } .quote-header-toggle .qht-bar { width: 3px; flex: 0 0 3px; border-radius: 1.5px; background: var(--color-primary); opacity: .5; } .quote-header-toggle .qht-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-family: Consolas, monospace; font-size: 10px; color: var(--color-text-secondary); overflow-wrap: anywhere; } .quote-header-toggle .qht-line b { font-weight: 600; } .quote-header-toggle .qht-arrow { align-self: center; margin: 0 2px 0 6px; font-size: 10px; color: var(--color-text-tertiary); }   .quote-pin-badge { position: absolute; top: 6px; right: 10px; z-index: 5; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-feature-pin); border: 1px solid var(--color-bg-base); pointer-events: none; }   .quote-hdr-indicator { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 2px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-text-secondary); opacity: .85; } .quote-hdr-indicator:hover { opacity: 1; background: var(--color-bg-sunken); border-radius: var(--radius-sm); }   .quote-bcc-receive { display: inline-block; margin-bottom: 4px; padding: 2px 6px; background: var(--color-warning-surface); color: var(--color-warning); border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: 500; }   .quote-scope-boundary { display: flex; align-items: center; gap: 4px; justify-content: center; margin: 6px 0; padding: 4px 10px; border: 1px solid var(--color-info); border-radius: var(--radius-md); font-size: var(--font-2xs); color: var(--color-text-secondary); }   .quote-loading-prev { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .att-missing { color: var(--color-warning); font-weight: 600; } .att-retry { margin-left: 6px; padding: 0 8px; height: 20px; cursor: pointer; background: var(--color-bg-base); color: var(--color-error); border: 1px solid var(--color-error); border-radius: var(--radius-sm); font-size: var(--font-2xs); } .att-opening-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-bg-base); opacity: 0.85; border-radius: var(--radius-md); } .att-opening-text { font-size: var(--font-xs); color: var(--color-text-secondary); } .att-menu-sep { height: 1px; margin: 4px 8px; background: var(--color-border-default); }   .quote-sending-state { margin-top: 7px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .quote-send-failed { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-size: var(--font-2xs); color: var(--color-error); }   .quote-item.pending-send { cursor: default; }   .quote-item.pending-send .rl-card-delete { pointer-events: none; } .quote-item.pending-send.is-failed .quote-body-border { background: var(--color-error-surface); border-left: 3px solid var(--color-error); }   .pending-send-spinner { flex: none; margin-left: auto; width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--color-text-tertiary) 30%, transparent); border-top-color: var(--color-text-tertiary); animation: pending-send-spin 0.8s linear infinite; } @keyframes pending-send-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pending-send-spinner { animation: none; } }   .pending-send-retry, .pending-send-discard {   flex-shrink: 0; white-space: nowrap; min-height: 28px; padding: 5px 10px; cursor: pointer; border-radius: var(--radius-md); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .pending-send-retry { margin-left: 10px; background: var(--color-primary); color: var(--color-text-on-primary); border: none; } .pending-send-retry:hover { background: var(--color-primary-dark); } .pending-send-discard { margin-left: 6px; background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } .pending-send-discard:hover { color: var(--color-error); border-color: var(--color-error); } .sending-cancelled-banner .cancelled-by { font-weight: 600; }   .reminder-deleted-note { margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .reminder-line { display: flex; align-items: center; gap: 6px;   width: 100%; max-width: 640px; box-sizing: border-box; margin: 8px auto; } .reminder-line > .quote-check-mark { margin-left: 0; } .reminder-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 12px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-left: 3px solid var(--color-warning); border-radius: var(--radius-md); font-size: var(--font-sm); color: var(--color-text-primary); } .reminder-row-icon { flex: none; width: 16px; height: 16px; color: var(--color-warning); } .reminder-row-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reminder-row-text em { font-style: normal; font-weight: 600; color: var(--color-warning-on-surface); } .reminder-row-time { flex: none; font-size: var(--font-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; } .reminder-row-agg { flex: none; padding: 0 4px; background: none; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-tertiary); } .reminder-row-agg:hover { color: var(--color-text-secondary); text-decoration: underline; } .reminder-row-jump { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 8px 0 10px; cursor: pointer; background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-xs); } .reminder-row-jump svg { width: 12px; height: 12px; } .reminder-row-jump:hover { border-color: var(--color-primary); color: var(--color-primary-on-surface); }   .reminder-line.checked { margin: 2px auto; } .reminder-line.checked .reminder-row { min-height: 26px; background: transparent; border-color: transparent; border-left-color: transparent; font-size: var(--font-xs); } .reminder-line.checked .reminder-row-icon { width: 13px; height: 13px; } .reminder-line.checked .reminder-row-icon, .reminder-line.checked .reminder-row-text, .reminder-line.checked .reminder-row-text em { color: var(--color-text-tertiary); font-weight: 400; } .reminder-line.checked .reminder-row-jump { height: 22px; border-color: transparent; color: var(--color-text-tertiary); } .reminder-line.checked .reminder-row-jump:hover { border-color: var(--color-border-default); color: var(--color-text-secondary); } .quote-agg-count { margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .quote-agg-close2 { margin-left: 8px; background: none; border: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .rl-card-reply { margin-left: 8px; padding: 2px 10px; cursor: pointer; background: var(--color-error); color: var(--color-text-on-primary); border: 0; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: 600; }   .quote-date-separator { position: relative; } .quote-date-jump { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; border: 0; background: transparent; color: transparent; opacity: 0; }   .quote-search-bridge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; background: var(--color-bg-base); border: 1px solid var(--color-warning); border-radius: 13px; cursor: pointer; font-size: var(--font-xs); font-weight: 600; color: var(--color-warning); } .quote-search-bridge:hover { background: var(--color-warning-surface); }   .draft-banner-sub { margin-left: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary);   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .qm-bcc { margin: 0 4px 0 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); }     .inbox-mail-connect-hint { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 8px 10px; background: var(--color-info-surface); border-radius: var(--radius-md); } .inbox-mail-connect-hint .hint-text { flex: 1; font-size: var(--font-2xs); color: var(--color-text-secondary); } .inbox-mail-connect-hint .hint-link { background: none; border: 0; cursor: pointer; font-size: var(--font-2xs); font-weight: 600; color: var(--color-info); } .inbox-mail-connect-hint .hint-link:hover { text-decoration: underline; } .inbox-mail-connect-hint .hint-dismiss { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0; }   .msg-list-header-new { flex: none; display: flex; align-items: center; padding: 4px 8px; background: var(--color-bg-sunken); } .btn-new-message-header { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; background: var(--color-primary); color: var(--color-text-on-primary); border: 0; border-radius: 6px; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-bold); } .btn-new-message-header:hover { background: var(--color-primary-dark); } .folder-section-badge.shipping { background: var(--color-feature-tracking); color: var(--color-text-on-primary); }   .folder-empty { padding: 8px 16px; list-style: none; font-size: var(--font-xs); color: var(--color-text-tertiary); } .folder-name-collapse { color: var(--color-text-secondary); }   .folder-plus-one { position: absolute; right: 12px; font-size: var(--font-base); font-weight: 700; color: var(--color-success); pointer-events: none; animation: sp-plus-one 1.8s ease-out forwards; } @keyframes sp-plus-one { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }   .summary-new-badge { margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: var(--color-info); color: var(--color-text-on-primary); font-size: var(--font-xs); } .summary-compact { margin-left: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); }         .search-input-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .search-watermark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: baseline; gap: 6px; pointer-events: none; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-tertiary); opacity: var(--search-watermark-opacity, 0.5);   z-index: 1; }   .search-hint { font-size: var(--font-2xs); color: var(--search-hint-fg, var(--color-text-disabled)); white-space: nowrap; } .btn-search-refilter { margin-left: 6px; padding: 3px 10px; border-radius: 12px; cursor: pointer; background: var(--color-primary-surface); color: var(--color-primary-on-surface); border: 1px solid var(--color-primary); font-size: var(--font-xs); font-weight: 600; }   .btn-search-reset { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px; border-radius: 12px; cursor: pointer; background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); font-size: var(--font-xs); white-space: nowrap; transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); } .btn-search-reset:hover { background: var(--color-error-surface); border-color: var(--color-error); }   .bookmark-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; } .bookmark-axis-label { margin-right: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .bookmark-group-chip { padding: 3px 6px; border-radius: 12px; cursor: pointer; background: var(--color-bg-sunken); border: 1px solid transparent; font-size: var(--font-xs); color: var(--color-text-secondary); } .bookmark-group-chip.active { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .back-to-inbox-row { display: flex; justify-content: flex-end; padding: 0 16px 12px; } .btn-back-inbox { padding: 3px 6px; background: none; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-back-inbox:hover { background: var(--color-border-default); border-radius: var(--radius-sm); }     .guidance-nudge { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0 0 20px; padding: 15px 10px; border-left: 3px solid var(--color-error); border-radius: 6px; align-self: stretch; } .guidance-nudge-amber { border-left-color: var(--color-warning); }   .guidance-nudge .nudge-text { font-size: var(--font-sm); color: var(--color-text-primary); }   .guidance-nudge .nudge-count {   white-space: nowrap; flex-shrink: 0; font-size: var(--font-lg); font-weight: 800; color: var(--color-error); margin: -5px 1px 0; line-height: 1; }   .guidance-nudge .nudge-line { flex: 1 1 auto; min-width: 0; } .guidance-nudge .nudge-line .nudge-count { display: inline-block; margin: 0 1px; position: relative; top: -2px; }   .guidance-nudge > svg { margin-left: 10px; margin-right: 0; flex-shrink: 0; }   .restore-selection-cta, .dm-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-width: 400px; margin: 0 auto; padding: 24px; text-align: center; } .restore-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .restore-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-restore-selection { margin-top: 8px; padding: 8px 16px; cursor: pointer; background: var(--color-primary); color: var(--color-text-on-primary); border: 0; border-radius: var(--radius-md); font-size: var(--font-sm); } .dm-welcome-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .dm-welcome-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-dm-start { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 16px; cursor: pointer; background: var(--color-primary); color: var(--color-text-on-primary); border: 0; border-radius: var(--radius-md); font-size: var(--font-sm); } .btn-dm-back { margin-top: 12px; padding: 5px 10px; background: none; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-primary-on-surface); }   .dm-start-pair { display: flex; align-items: center; } .dm-start-av, .dm-start-av-wrap { position: relative; width: 64px; height: 64px; flex: none; } .dm-start-av { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xl); font-weight: var(--weight-semibold); } .dm-start-av img { width: 100%; height: 100%; object-fit: cover; } .dm-start-link { position: relative; width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; } .dm-start-link::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px dashed var(--color-primary-muted); } .dm-start-link > span { position: relative; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-base); border: 1.5px solid var(--color-primary); } .dm-start-online { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 2.5px var(--color-bg-sunken); } .dm-start-memo { width: 72px; height: 72px; border-radius: 50%; background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; } .dm-start-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; } .dm-start-title .dm-welcome-title { font-size: var(--font-lg); font-weight: var(--weight-bold); margin: 0; } .dm-start-presence { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 1px 9px; border-radius: 12px; border: 1px solid var(--color-border-default); background: var(--color-bg-base); font-size: var(--font-2xs); color: var(--color-text-tertiary); } .dm-start-presence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-disabled); } .dm-start-presence.on::before { background: var(--color-success); } .dm-start-lead { color: var(--color-text-secondary); font-size: var(--font-sm); margin: 18px 0 0; } .dm-start-tips-h { margin: 36px 0 14px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .dm-start-tips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; min-width: 300px; } .dm-start-tip { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; cursor: default; } .dm-start-tip i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .dm-start-tip b { margin-top: 8px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .dm-start-tip.t1 i { background: var(--color-info-surface); color: var(--color-info); } .dm-start-tip.t2 i { background: var(--color-warning-surface); color: var(--color-warning-dark); } .dm-start-tip.t3 i { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .dm-start-card .btn-dm-start { margin-top: 36px; } .btn-dm-back:hover { text-decoration: underline; }   .reply-placeholder-bar { min-height: 36px; display: flex; align-items: center; padding: 0 16px; cursor: text; background: var(--color-bg-sunken); border-top: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-tertiary); }     .compose-panel-root { display: none; }   .ai-polish-judge { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin-right: 4px; } .ai-polish-instruction-label { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ai-polish-rerun-icon { margin-right: 4px; }   .compose-attachment-head { margin: 4px 0 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .compose-attachment-item { position: relative; } .attachment-ctx-menu, .chip-ctx-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 180px; padding: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .attachment-ctx-head { padding: 4px 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .attachment-ctx-menu button, .chip-ctx-menu button { display: block; width: 100%; padding: 6px 8px; text-align: left; background: none; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-primary); } .attachment-ctx-menu button:hover, .chip-ctx-menu button:hover { background: var(--color-primary-surface-light); } .attachment-rename { position: absolute; top: 100%; left: 0; z-index: 60; display: flex; gap: 4px; padding: 6px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .attachment-failed { margin-left: 6px; color: var(--color-error); font-size: var(--font-2xs); }   .attachment-uploading { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--color-text-tertiary); font-size: var(--font-2xs); } .attachment-retry { margin-left: 4px; padding: 0 6px; cursor: pointer; background: var(--color-bg-base); color: var(--color-error); border: 1px solid var(--color-error); border-radius: var(--radius-sm); font-size: var(--font-2xs); } .attachment-opening-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--color-bg-base); opacity: 0.85; border-radius: var(--radius-sm); } .attachment-opening-text { font-size: var(--font-2xs); color: var(--color-text-secondary); }   .compose-popup-check { display: flex; align-items: center; gap: 6px; } .popup-note { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .popup-inline-btn { background: none; border: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-primary-on-surface); } .popup-sub-label { margin: 6px 0 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .popup-sub-label.sub2 { margin-left: 8px; }   .reply-preview-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .reply-preview-label-to { font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-on-surface); cursor: pointer; } .reply-preview-clear { background: none; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .compose-send-state { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: var(--font-xs); } .compose-send-state.sent { color: var(--color-success-dark); } .compose-send-state.failed { color: var(--color-error); } .compose-send-retry { padding: 1px 8px; cursor: pointer; background: var(--color-bg-base); color: var(--color-error); border: 1px solid var(--color-error); border-radius: var(--radius-sm); font-size: var(--font-2xs); }   .compose-send-progress { width: 120px; height: 4px; }   .compose-sending-title { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .compose-sending-sub { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .schedule-dt-row { display: flex; gap: 12px; } .schedule-dt-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .schedule-quick-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .schedule-quick-row button { padding: 2px 8px; cursor: pointer; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-xs); color: var(--color-text-secondary);   width: auto; flex: 0 0 auto; justify-content: center; }   .compose-toggle { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: var(--font-2xs); color: var(--color-text-secondary); cursor: pointer; } .compose-draft-list { margin: 6px 12px; padding: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .draft-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .draft-list-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .draft-new-btn { padding: 2px 10px; cursor: pointer; background: var(--color-primary); color: var(--color-text-on-primary); border: 0; border-radius: var(--radius-sm); font-size: var(--font-2xs); } .draft-list-empty { padding: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .draft-list-items { margin: 0; padding: 0; list-style: none; } .draft-list-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-primary); } .draft-list-item:hover { background: var(--color-primary-surface-light); } .draft-item-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draft-item-time { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .draft-item-delete { background: none; border: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .draft-item-delete:hover { color: var(--color-error); }   .mention-list { display: block; }   .settings-layout > .settings-sidebar { width: 220px; min-width: 220px; display: flex; flex-direction: column; background: var(--color-bg-elevated); border-right: 1px solid var(--color-border-default); padding-top: 0; } .settings-sidebar-header { display: flex; align-items: center; flex: none;   gap: 0; padding: 16px;   background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } .settings-sidebar-header .settings-sidebar-title { padding: 0; color: #fff; font-size: var(--font-md); font-weight: 600; } .settings-back-button { display: inline-flex; align-items: center; border: none; background: transparent; color: var(--color-text-on-primary); line-height: 1; padding: 4px; margin-right: 8px; border-radius: 6px; cursor: pointer; } .settings-back-button:hover { background: rgba(255, 255, 255, 0.15); }   .settings-sidebar-header-icon { margin-left: auto; color: var(--color-text-on-primary-muted); flex: none; } .settings-sidebar-search { position: relative; flex: none; padding: 8px 10px; background: var(--color-bg-elevated); }   .settings-search-icon { flex: none; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; } .settings-search-input { width: 100%;   padding: 6px 10px 6px 28px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-xs); } .settings-nav-scroll { flex: 1; overflow-y: auto; padding: 4px 0; } .settings-nav-group-header { display: flex; align-items: center; gap: 6px; margin: 20px 16px 8px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-tertiary); } .settings-nav-empty { margin: 20px 16px; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); } .settings-tab-description { margin: 0 0 20px; font-size: var(--font-sm); color: var(--color-text-tertiary); }   .settings-card-header { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); }   .settings-card-header .sp-icon { color: var(--color-text-secondary); flex: none; } .settings-nav-group-header .sp-icon { flex: none; } .sp-icon-tertiary { color: var(--color-text-tertiary); } .sp-icon-feature-message { color: var(--color-feature-message); } .sp-icon-feature-file { color: var(--color-feature-file); } .sp-icon-feature-timelog { color: var(--color-feature-timelog); } .settings-subsection-title { margin: 16px 0 8px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); } .settings-readonly-value { font-size: var(--font-sm); color: var(--color-text-primary); word-break: break-all; } .settings-row-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .settings-row-card-title { font-size: var(--font-base); font-weight: 500; color: var(--color-text-primary); }   .settings-row-card > .settings-btn-sm, .settings-row-card-actions > .settings-btn-sm { flex: 0 0 auto; white-space: nowrap; }   .settings-row-card > input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex: 0 0 auto; }   .settings-row-card-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }   .settings-hint.settings-pre { white-space: pre-wrap; } .settings-folder-picker { margin-top: 12px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); } .settings-slider { width: 160px; accent-color: var(--color-primary); }   .settings-locked-host { position: relative; } .settings-locked-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: var(--font-sm); color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent); border-radius: 8px; } .settings-folder-picker .settings-list-item.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }     .settings-layout-embedded { height: 100%; }   html[data-contrast="high"] { --color-text-primary: #000000; --color-text-secondary: #1a1a1a; --color-text-tertiary: #3a3a3a; --color-border-default: #6a6a6a; --color-border-muted: #4a4a4a; --color-bg-base: #ffffff; --color-bg-elevated: #ffffff; --color-bg-sunken: #f0f0f0; } html[data-contrast="high"].dark { --color-text-primary: #ffffff; --color-text-secondary: #ededed; --color-text-tertiary: #d0d0d0; --color-border-default: #9a9a9a; --color-border-muted: #b4b4b4; --color-bg-base: #000000; --color-bg-elevated: #0a0a0a; --color-bg-sunken: #141414; }   html[data-contrast="high"] .settings-section,html[data-contrast="high"] .settings-input,html[data-contrast="high"] .settings-input-sm,html[data-contrast="high"] .settings-textarea{ border-width: 2px; }     .settings-sidebar-headtext { display: flex; flex-direction: column; min-width: 0; } .settings-sidebar-subtitle { font-size: var(--font-xs);   color: var(--color-text-on-primary-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-nav-group-icon { display: inline-flex; flex: none; } .settings-nav-group-label { min-width: 0; } .settings-menu-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   .settings-listlabel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 16px 0 8px; } .settings-listlabel-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }     .settings-add-pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; } .settings-add-plus { font-weight: bold; }   .settings-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .settings-list-chevron { display: inline-flex; color: var(--color-text-tertiary); flex: none; } .settings-list-grip { display: inline-flex; color: var(--color-text-tertiary); cursor: grab; flex: none; } .settings-list-empty { padding: 12px; text-align: center; font-size: 9pt; color: var(--color-text-tertiary); } .settings-list-item-preview { flex: none; }   button.settings-menu-item { display: flex; align-items: center; gap: 6px; width: 100%;   border: none; background: transparent; text-align: left; cursor: pointer;   font-family: inherit; }   button.settings-list-item { width: 100%; background: transparent; border-left: none; border-right: none; border-top: none; text-align: left; cursor: pointer; color: inherit; font: inherit; } button.settings-list-item:hover { background: var(--color-bg-sunken); }   .settings-editor { margin-top: 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); outline: none; } .settings-editor-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-border-default); } .settings-editor-title { flex: 1; font-size: 10pt; font-weight: var(--weight-semibold); } .settings-editor-body { padding: 12px; }   .settings-kbd-hints { display: flex; align-items: center; gap: 4px; } .settings-kbd { padding: 1px 5px; border: 1px solid var(--color-border-muted); border-radius: 3px; background: var(--color-bg-sunken); font-size: 8pt; color: var(--color-text-secondary); } .settings-kbd-hint { font-size: 8pt; color: var(--color-text-tertiary); margin-right: 8px; } .settings-required-mark { color: var(--color-error); } .settings-actions-split { margin-left: auto; } .settings-sectiontext { font-size: 10pt; color: var(--color-text-primary); }   .settings-seg-bar { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); } .settings-seg-btn { padding: 7px 16px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-secondary); font-size: 10pt; font-weight: var(--weight-semibold); cursor: pointer; } .settings-seg-btn:hover { background: var(--color-bg-elevated); } .settings-seg-btn.is-active { background: var(--color-bg-elevated); color: var(--color-primary-on-surface); }   .settings-usage { margin: 6px 0; } .settings-usage-text { font-size: 9pt; color: var(--color-text-secondary); margin-bottom: 3px; } .settings-usage-track { height: 6px; border-radius: 3px; background: var(--color-bg-sunken); overflow: hidden; } .settings-usage-bar { height: 100%; background: var(--color-primary); } .settings-usage-bar.is-warning { background: var(--color-warning); } .settings-usage-bar.is-danger { background: var(--color-error); }   .settings-preview-cond { font-size: 9pt; color: var(--color-text-secondary); } .settings-preview-sep { color: var(--color-text-tertiary); } .settings-preview-arrow { color: var(--color-text-tertiary); } .settings-preview-billing { font-size: 9pt; font-weight: var(--weight-semibold); }   .settings-warn-row { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; font-size: 9pt; color: var(--color-warning); } .settings-warn-icon { flex: none; }   .settings-subpage { padding: 0 0 24px; } .settings-subpage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .settings-subpage-head-primary { background: var(--color-primary-surface); } .settings-subpage-headtext { display: flex; flex-direction: column; flex: 1; min-width: 0; } .settings-subpage-title { font-size: var(--font-lg); font-weight: bold; } .settings-subpage-sub { font-size: 8pt; color: var(--color-text-tertiary); } .settings-subpage-body { padding: 0; } .settings-subpage-close { margin-left: auto; } .settings-subpage-close-onprimary { color: var(--color-primary-on-surface); } .settings-subpage-danger { color: var(--color-error); } .settings-subpage-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .settings-subpage-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .settings-stat { font-size: 9pt; color: var(--color-text-secondary); } .settings-stat-danger { color: var(--color-error); }   .settings-progress { width: 160px; height: 6px; accent-color: var(--color-primary); } .settings-selection-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--color-bg-sunken); } .settings-toggle { display: inline-flex; align-items: center; gap: 6px; }   .settings-table-head, .settings-table-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--color-border-default); } .settings-table-row { font-size: 10pt; } .settings-table-head { font-size: 9pt; color: var(--color-text-tertiary); } .settings-table-row.is-changed { background: var(--color-primary-surface); } .settings-table-col { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   .settings-mr-flow { max-width: 640px; } .settings-mr-flow-title { font-size: var(--font-lg); font-weight: bold; margin: 0 0 6px; } .settings-mr-flow-lead { font-size: 9pt; color: var(--color-text-tertiary); margin: 0 0 16px; } .settings-mr-step { position: relative; margin: 0 0 12px; padding: 16px 20px 16px 56px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); }   .settings-mr-step.settings-mr-focus { box-shadow: 0 0 0 2px var(--color-primary); transition: box-shadow 0.3s; } .settings-mr-step-no { position: absolute; left: 16px; top: 16px; font-size: 10pt; font-weight: bold; color: var(--color-primary-on-surface); } .settings-mr-step-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: none; background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; } .settings-mr-step-name { font-size: 10pt; font-weight: var(--weight-semibold); } .settings-mr-step-summary { margin-left: auto; font-size: 9pt; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-mr-arrow { margin: 0 0 12px; text-align: center; font-size: 9pt; color: var(--color-text-tertiary); } .settings-mr-assign { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .settings-mr-assign-list { display: flex; flex-wrap: wrap; gap: 6px; }   .settings-mr-assign-ac { position: relative; } .settings-mr-assign-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; max-height: 220px; overflow-y: auto; list-style: none; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .settings-mr-assign-suggest-item { padding: 4px 10px; font-size: 9pt; color: var(--color-text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-mr-assign-suggest-item:hover, .settings-mr-assign-suggest-item.is-active { background: var(--color-bg-sunken); }     .settings-space .settings-sidebar-search { padding: 8px 12px; }   .settings-space .settings-search-icon { left: 22px; }   .settings-space .settings-content { padding: 0; } .settings-space .settings-tab-section { max-width: 600px; margin: 36px 36px 48px; }   .settings-space .settings-tab-description { margin: 0 0 32px; }   .settings-space .settings-card-header { margin: 0 0 10px; } .settings-space .settings-card-header .sp-icon { color: var(--color-text-tertiary); }   .settings-space .settings-section { position: relative; margin: 0 0 24px; padding: 22px 24px 22px 28px; } .settings-space .settings-section::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--color-primary); opacity: 0.4; }   .settings-space .settings-section.is-timelog::before { background: var(--color-feature-timelog); }   .settings-space .settings-section.is-phone::before { background: var(--color-feature-phone); }   .settings-space .settings-section.is-task::before { background: var(--color-feature-task); }   .settings-space-avatar-row { display: flex; align-items: flex-start; gap: 14px; } .settings-space-avatar-text { flex: 1; min-width: 0; } .settings-space-avatar-lead { font-size: 9pt; color: var(--color-text-primary); } .settings-space-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .settings-space-avatar-progress { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 9pt; color: var(--color-text-secondary); } .settings-space-avatar-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .settings-space-avatar-candidate { width: 56px; height: 56px; padding: 2px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .settings-space-avatar-candidate img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; } .settings-space-avatar-candidate:hover { border-color: var(--color-primary); }   .settings-pill-primary, .settings-pill-secondary { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 8.5pt; font-weight: 600; line-height: 1.2; border: 1px solid transparent; white-space: nowrap;   } .settings-pill-primary { background: var(--color-primary); color: #fff; } .settings-pill-primary:hover { background: var(--color-primary-dark); } .settings-pill-secondary { background: var(--color-bg-sunken); border-color: var(--color-border-default); color: var(--color-text-secondary); } .settings-pill-secondary:hover { background: var(--color-bg-elevated); border-color: var(--color-border-muted); } .settings-pill-secondary:disabled { opacity: .5; cursor: default; }   .settings-inline-message { margin-top: 10px; font-size: 8.5pt; color: var(--color-text-secondary); white-space: pre-wrap; } .settings-inline-message.is-error { color: var(--color-error); }   .settings-space .settings-section.settings-quote-chart { padding-top: 14px; padding-bottom: 14px; } .settings-quote-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--color-bg-sunken); } .settings-quote-bar-seg { display: block; height: 100%; } .settings-quote-bar-seg:nth-child(1) { background: var(--color-text-tertiary); } .settings-quote-bar-seg:nth-child(2) { background: var(--color-feature-message); } .settings-quote-bar-seg:nth-child(3) { background: var(--color-feature-timelog); } .settings-quote-bar-seg:nth-child(4) { background: var(--color-feature-task); } .settings-quote-bar-seg:nth-child(5) { background: var(--color-feature-contact); } .settings-quote-bar-seg:nth-child(6) { background: var(--color-primary); } .settings-quote-stat-row { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 6px; background: var(--color-bg-base); margin: 2px 0; } .settings-quote-stat-label { flex: 1; min-width: 0; font-size: 9pt; color: var(--color-text-primary); } .settings-quote-stat-count { font-size: 9pt; font-weight: 600; color: var(--color-text-secondary); } .settings-quote-stat-pct { min-width: 56px; text-align: right; font-size: 8pt; color: var(--color-text-tertiary); } .settings-quote-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 120px; } .settings-quote-spark-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--color-info); } .settings-quote-sample { padding: 10px 12px; border-radius: 6px; background: var(--color-bg-base); margin: 2px 0; } .settings-quote-sample-head { display: flex; align-items: baseline; gap: 8px; } .settings-quote-sample-subject { flex: 1; min-width: 0; font-size: 9pt; font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-quote-sample-time { font-size: 8pt; color: var(--color-text-tertiary); } .settings-quote-sample-sender { font-size: 8pt; color: var(--color-text-tertiary); margin: 2px 0 4px; } .settings-quote-sample-body { font-family: 'Cascadia Code', Consolas, monospace; font-size: 8pt; color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-all; } .settings-quote-sample-actions { display: flex; justify-content: flex-end; margin-top: 8px; }     .settings-plan-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(26, 26, 46, .6); }   .settings-plan-page { position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100vw - 64px); max-width: 1280px; max-height: min(740px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-base); box-shadow: var(--shadow-lg); }   .settings-plan-page .settings-subpage-head-primary { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 20px 32px 18px; border-radius: 16px 16px 0 0; background: linear-gradient(105deg, #141428 0%, #1A2744 60%, #1E3A5F 100%); color: #fff; } .settings-plan-page .settings-subpage-title { font-size: var(--font-lg); font-weight: bold; color: #fff; } .settings-plan-page .settings-subpage-sub { margin-top: 5px; font-size: var(--font-xs); color: var(--color-plan-header-text-secondary); }   .settings-plan-page .settings-subpage-body { flex: 1; min-height: 0; padding: 0; overflow-y: auto; overflow-x: hidden; }   .settings-plan-page .settings-subpage-close-onprimary { flex: none; width: 30px; height: 30px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-plan-header-close-bg); color: var(--color-plan-header-close-fg); border: none; border-radius: 8px; cursor: pointer; line-height: 1; } .settings-plan-page .settings-subpage-close-onprimary:hover { background: var(--color-plan-header-close-bg-hover); }   .settings-plan-page .settings-plan-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 16px 8px; padding: 0; flex-wrap: nowrap; } .settings-plan-page .settings-plan-card { position: relative; width: auto; background: var(--color-bg-base); border-color: var(--color-border-default); } .settings-plan-card .settings-plan-strip { height: 3px; border-radius: 11px 11px 0 0; } .settings-plan-card.is-Lite .settings-plan-strip { background: var(--color-plan-lite); } .settings-plan-card.is-Single .settings-plan-strip { background: var(--color-plan-single); } .settings-plan-card.is-Team .settings-plan-strip { background: var(--color-plan-team); } .settings-plan-card.is-Business .settings-plan-strip { background: var(--color-plan-business); } .settings-plan-card.is-Enterprise .settings-plan-strip { background: var(--color-plan-enterprise); } .settings-plan-card.is-Lite .settings-plan-code { color: var(--color-plan-lite); } .settings-plan-card.is-Single .settings-plan-code { color: var(--color-plan-single); } .settings-plan-card.is-Team .settings-plan-code { color: var(--color-plan-team); } .settings-plan-card.is-Business .settings-plan-code { color: var(--color-plan-business); } .settings-plan-card.is-Enterprise .settings-plan-code { color: var(--color-plan-enterprise); } .settings-plan-card.is-Lite .settings-plan-check { color: var(--color-plan-lite); } .settings-plan-card.is-Single .settings-plan-check { color: var(--color-plan-single); } .settings-plan-card.is-Team .settings-plan-check { color: var(--color-plan-team); } .settings-plan-card.is-Business .settings-plan-check { color: var(--color-plan-business); } .settings-plan-card.is-Enterprise .settings-plan-check { color: var(--color-plan-enterprise); } .settings-plan-card.is-current { border-color: var(--color-primary); } .settings-plan-ribbon { padding: 5px 0; text-align: center; font-size: var(--font-xs); font-weight: bold; color: #fff; background: var(--color-primary); } .settings-plan-page .settings-plan-body { padding: 16px 18px; } .settings-plan-code { font-size: var(--font-xs); font-weight: bold; } .settings-plan-amount { margin-top: 6px; font-size: 22px; font-weight: bold; color: var(--color-text-primary); } .settings-plan-yen { font-size: var(--font-sm); } .settings-plan-per { font-size: var(--font-xs); color: var(--color-text-tertiary); } .settings-plan-tagline { margin-top: 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .settings-plan-rule { height: 1px; margin: 12px 0 10px; background: var(--color-border-default); } .settings-plan-inherit { margin-bottom: 3px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-tertiary); } .settings-plan-page .settings-plan-feature { display: flex; align-items: baseline; gap: 6px; } .settings-plan-check { font-weight: bold; } .settings-plan-new { margin-left: 4px; padding: 1px 4px; border-radius: 3px; background: var(--color-primary-surface, var(--color-bg-sunken)); color: var(--color-primary-on-surface); font-size: var(--font-2xs); font-weight: bold; } .settings-plan-btn { display: block; width: 100%; margin-top: 16px; padding: 7px 0; border-radius: 8px; cursor: pointer; text-align: center; font-size: var(--font-xs); font-weight: 600; border: 1px solid transparent; } .settings-plan-btn.is-up { background: var(--color-primary); color: #fff; } .settings-plan-btn.is-down { background: transparent; border-color: var(--color-border-default); color: var(--color-text-secondary); } .settings-plan-btn.is-contact { background: transparent; border-color: var(--color-plan-enterprise); color: var(--color-plan-enterprise); text-decoration: none; } .settings-plan-btn:disabled { opacity: .5; cursor: default; }   .settings-plan-footer { flex: none; display: flex; justify-content: center; padding: 10px 0 12px; border-top: 1px solid var(--color-border-default); }   .settings-space .settings-content { position: relative; } .settings-space .settings-content:has(> .settings-subpage:not(.settings-plan-page)), .settings-space .settings-content:has(> .settings-editor) { overflow: hidden; } .settings-space .settings-content > .settings-subpage:not(.settings-plan-page), .settings-space .settings-content > .settings-editor { position: absolute; inset: 0; z-index: 5; margin: 0; border: none; border-radius: 0; background: var(--color-bg-base); overflow-y: auto; animation: settings-subpage-in var(--duration-normal, .2s) ease-out;   padding: 24px 32px 36px; } @keyframes settings-subpage-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }   .settings-dialog-scrim { position: fixed; inset: 0; z-index: 1210; background: rgba(0, 0, 0, .4); } .settings-dialog-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1211; min-width: 320px; max-width: 520px; padding: 20px 24px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); box-shadow: var(--shadow-lg); }   .settings-efax-popup { min-width: 0; max-width: 360px; width: calc(100vw - 40px); } .settings-plan-confirm-body { white-space: pre-wrap; font-size: var(--font-sm); color: var(--color-text-primary); line-height: 1.7; }   .settings-plan-change { margin-top: 4px; padding: 6px 16px; border: none; border-radius: 6px; cursor: pointer; background: var(--color-primary-surface, var(--color-bg-sunken)); color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 600; } .settings-link-button { padding: 0; border: none; background: none; cursor: pointer; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 500; } .settings-link-button:hover { text-decoration: underline; } .settings-cancel-confirm { max-width: 280px; } .settings-cancel-button { margin-top: 12px; padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; background: var(--color-bg-sunken); color: var(--color-error); font-size: var(--font-xs); font-weight: 500; } .settings-cancel-button:hover { background: var(--color-border-default); } .settings-cancel-button:disabled { opacity: .5; cursor: default; }   .settings-stamp-thumb { width: 28px; height: 28px; object-fit: contain; } .settings-list-item.is-selected { background: var(--color-primary-surface); } .settings-stamp-preview { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; padding: 16px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-sunken); } .settings-stamp-preview-image { max-width: 120px; max-height: 120px; object-fit: contain; } .settings-stamp-preview-name { margin-top: 8px; font-size: var(--font-sm); color: var(--color-text-primary); } .settings-stamp-preview-hint { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .settings-efax-lead { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-tertiary); margin-bottom: 8px; } .settings-efax-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); margin-bottom: 16px; }   .settings-pill-primary.is-mailreceive { background: var(--color-mail-receive); } .settings-pill-primary.is-mailreceive:hover { background: var(--color-mail-receive-dark); } .settings-routing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .settings-routing-title { font-size: var(--font-base); font-weight: bold; color: var(--color-text-primary); } .settings-routing-list { display: flex; flex-direction: column; }   .settings-routing-row { display: flex; align-items: flex-start; gap: 0; margin-bottom: 8px; padding: 11px 14px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); cursor: pointer; } .settings-routing-row.is-static { cursor: default; align-items: center; } .settings-routing-row:not(.is-static):hover { background: var(--color-bg-elevated); } .settings-routing-grip { margin-right: 10px; color: var(--color-text-tertiary); font-size: var(--font-sm); cursor: ns-resize; } .settings-routing-priority { flex: none; width: 26px; height: 26px; margin-right: 12px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-mail-receive-surface); color: var(--color-mail-receive); font-size: var(--font-xs); font-weight: bold; } .settings-routing-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .settings-routing-target { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .settings-routing-cond { margin-top: 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .settings-routing-hoparrow { margin: 0 8px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .settings-routing-note { flex: none; margin-left: 8px; padding: 2px 8px; border-radius: 9999px; background: var(--color-warning-surface); color: var(--color-warning-dark); font-size: var(--font-2xs); font-weight: 600; } .settings-routing-actions { flex: none; display: flex; align-items: center; gap: 8px; } .settings-routing-empty { margin-top: 2px; padding: 20px 18px; text-align: center; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); font-size: var(--font-sm); color: var(--color-text-secondary); } .settings-routing-empty-sub { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .settings-routing-emptyline { font-size: var(--font-xs); color: var(--color-text-tertiary); } .settings-routing-inbound { margin-top: 22px; } .settings-routing-inbound-head { display: flex; align-items: center; gap: 8px; } .settings-routing-pending { padding: 1px 8px; border-radius: 9999px; background: var(--color-warning-surface); color: var(--color-warning-dark); font-size: var(--font-2xs); font-weight: bold; } .settings-routing-sep { height: 1px; margin: 14px 0; background: var(--color-border-default); } .settings-routing-warn { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--color-warning-surface); color: var(--color-warning-dark); font-size: var(--font-2xs); line-height: 1.7; } .settings-routing-condlabel { margin: 8px 0 3px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .settings-routing-dirlabel { margin: 0 0 6px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); }   .settings-topology-badge { flex: none; padding: 2px 9px; border-radius: 9999px; font-size: var(--font-2xs); font-weight: bold; background: var(--color-warning-surface); color: var(--color-warning-dark); } .settings-topology-badge.is-kind-1 { background: var(--color-success-surface); color: var(--color-success-dark); } .settings-topology-badge.is-kind-2 { background: var(--color-bg-sunken); color: var(--color-text-tertiary); }   .settings-topology-self { margin: 10px 0; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--color-mail-receive); background: var(--color-mail-receive-surface); } .settings-topology-self-label { font-size: var(--font-2xs); font-weight: bold; color: var(--color-mail-receive); } .settings-topology-self-name { margin-top: 1px; font-size: var(--font-base); font-weight: bold; color: var(--color-text-primary); } .settings-topology-self-addr { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .settings-routing-diagram { overflow-x: auto; margin: 6px 0 16px; padding: 12px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: radial-gradient(var(--color-border-default) 0.5px, transparent 1.4px) 0 0 / 20px 20px, var(--color-bg-sunken); } .settings-routing-svg { display: block; height: auto; max-width: none; } .settings-topoedge { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke: var(--color-warning-dark); } .settings-topoedge.is-kind-0 { stroke: var(--color-warning-dark); stroke-dasharray: 7 6; } .settings-topoedge.is-kind-1 { stroke: var(--color-success-dark); } .settings-topoedge.is-kind-2 { stroke: var(--color-text-tertiary); stroke-width: 1.7; stroke-dasharray: 2 5; } .settings-topoarrow { stroke: none; fill: var(--color-warning-dark); } .settings-topoarrow.is-kind-1 { fill: var(--color-success-dark); } .settings-topoarrow.is-kind-2 { fill: var(--color-text-tertiary); } .settings-topolabel { font-size: 10.5px; fill: var(--color-text-secondary); font-weight: 500; } .settings-topolabel-bg { fill: var(--color-bg-base); stroke: var(--color-border-default); stroke-width: 1; } .settings-toponode .n-card { fill: var(--color-bg-base); stroke: var(--color-border-default); stroke-width: 1.4; } .settings-toponode.is-self .n-card { fill: var(--color-mail-receive-surface); stroke: var(--color-mail-receive); stroke-width: 2.4; } .settings-toponode .n-glyph { fill: var(--color-mail-receive-surface); } .settings-toponode.is-self .n-glyph { fill: var(--color-mail-receive); } .settings-toponode .n-glyphtext { fill: var(--color-mail-receive); font-weight: 700; font-size: 13px; } .settings-toponode.is-self .n-glyphtext { fill: #fff; } .settings-toponode .n-title { fill: var(--color-text-primary); font-weight: 700; font-size: 14px; } .settings-toponode .n-sub { fill: var(--color-text-tertiary); font-size: 11px; }   .settings-space .settings-section .settings-section::before { display: none; } .settings-space .settings-section .settings-section { padding: 16px; margin: 12px 0 0; background: var(--color-bg-sunken); }   .settings-space .settings-input, .settings-space .settings-textarea, .settings-space .settings-select-sm { padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); font-size: var(--font-sm); color: var(--color-text-primary); } .settings-space .settings-input:focus, .settings-space .settings-textarea:focus, .settings-space .settings-select-sm:focus { outline: none; border-color: var(--color-primary); } .settings-space .settings-input-sm { width: 80px; text-align: center; }   .settings-space .settings-description { margin: 6px 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); line-height: 1.7; } .settings-space .settings-section > .settings-description:first-child { margin: 0 0 14px; }   .settings-space .settings-section .settings-field-label { margin: 0 0 6px; font-size: var(--font-xs); font-weight: 500; color: var(--color-text-secondary); }   .settings-space .settings-section > * + .settings-field-label { margin-top: 14px; }   .settings-space .settings-field-pair { display: flex; gap: 16px; flex-wrap: wrap; } .settings-space .settings-field-pair > div { flex: 1 1 160px; min-width: 0; }   .settings-space .settings-typefield > .settings-select-sm { width: 100%; } .settings-space .settings-typefield .settings-field-row > .settings-select-sm { flex: 1 1 auto; min-width: 0; }   .settings-space .settings-branch-preview { width: 80px; height: 80px; margin: 4px auto 18px; border-radius: 50%; border: 1px solid var(--color-border-default); display: flex; align-items: center; justify-content: center; overflow: hidden; }   .settings-space .settings-listlabel { margin: 0 0 10px; } .settings-space .settings-list { margin: 0 0 24px; border-radius: 8px; background: var(--color-bg-elevated); }     .home-space-avatar-hit { display: flex; flex: 0 0 auto; cursor: pointer; }     .home-space-avatar-hit.is-waiting { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .home-header-title.is-waiting { display: inline-block; width: 168px; height: 15px; border-radius: 4px; background: var(--color-border-default); } .home-header-hint { font-size: var(--font-xs); color: var(--color-text-tertiary); } .setup-step-text { display: flex; flex-direction: column; flex: 1; } .setup-step-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); } .setup-step-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-plan-change-btn { margin-left: auto; padding: 4px 10px; border: none; background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .home-plan-usage-caption { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-plan-hint { margin: 8px 0; font-size: var(--font-xs); color: var(--color-text-secondary); }   .home-plan-hint.is-near, .home-plan-hint.is-reached { margin: 10px 0 8px; padding: 8px 12px; border-radius: 6px; } .home-plan-hint.is-near { background: var(--color-warning-surface); color: var(--color-warning); } .home-plan-hint.is-reached { background: var(--color-error-surface); color: var(--color-error); } .home-member-menu { position: absolute; right: 16px; margin-top: 30px; padding: 4px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); z-index: 5; } .home-member-menu-item { padding: 8px 12px; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); white-space: nowrap; cursor: pointer; } .home-member-state { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin-right: 8px; } .home-branch-empty { margin: 0 0 10px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .home-branch-grid { display: flex; flex-wrap: wrap; gap: 10px; } .home-branch-card { display: flex; flex-direction: column; min-width: 150px; padding: 9px 11px; border: 1px solid var(--color-border-default); border-radius: 9px; background: var(--color-bg-sunken); }   .home-branch-card.is-clickable { cursor: pointer; } .home-branch-card.is-clickable:hover { border-color: var(--color-primary); background: var(--color-primary-surface); } .home-branch-name { font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); } .home-branch-address { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .branch-detail { padding: 16px 20px; } .branch-detail-empty { font-size: var(--font-xs); color: var(--color-text-tertiary); } .branch-detail-typebadge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); } .branch-detail-typebadge-label { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .branch-detail-secttitle { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; } .branch-detail-secttitle-members { display: flex; align-items: baseline; justify-content: space-between; } .branch-detail-membercount { font-size: var(--font-xs); font-weight: 400; color: var(--color-text-tertiary); } .branch-detail-card { border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); padding: 12px 14px; margin-bottom: 20px; } .branch-detail-row { display: flex; gap: 12px; margin-bottom: 8px; } .branch-detail-row:last-child { margin-bottom: 0; } .branch-detail-key { flex: 0 0 100px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .branch-detail-val { flex: 1; min-width: 0; font-size: var(--font-sm); color: var(--color-text-primary); overflow-wrap: anywhere; } .branch-detail-members { display: flex; flex-direction: column; } .branch-detail-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border-default); } .branch-detail-member:last-child { border-bottom: 0; } .branch-detail-member-avatar { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-avatar); background: var(--color-border-default); font-size: var(--font-2xs); font-weight: 700; color: var(--color-text-secondary); } .branch-detail-member-name { font-size: var(--font-sm); color: var(--color-text-primary); } .branch-detail-members-empty { margin: 16px 0; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .rdp { display: flex; flex-direction: column; height: 100%; min-height: 0; }   .rdp-summary { margin: 12px 16px 0; padding: 12px 16px; border-radius: 8px; background: var(--color-bg-elevated); } .rdp-summary-counts { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; } .rdp-summary-count { font-size: var(--font-xs); cursor: pointer; } .rdp-summary-overdue { color: var(--color-error); } .rdp-summary-almost { color: var(--color-warning); } .rdp-summary-comfortable { color: var(--color-text-secondary); } .rdp-summary-completed { color: var(--color-success); }   .rdp-summary-bar { display: flex; height: 6px; overflow: hidden; } .rdp-summary-seg { display: block; min-width: 0; } .rdp-seg-overdue { background: var(--color-error); border-radius: 3px 0 0 3px; } .rdp-seg-almost { background: var(--color-warning); } .rdp-seg-comfortable { background: var(--color-text-tertiary); opacity: .4; } .rdp-seg-completed { background: var(--color-success); opacity: .5; border-radius: 0 3px 3px 0; }   .rdp-filter { margin: 8px 16px 0; } .rdp-filter-header { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-tertiary); cursor: pointer; } .rdp-filter-body { margin-top: 4px; } .rdp-chiprow { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .rdp-chiprow:last-child { margin-bottom: 0; }   .rdp-chip { display: inline-flex; align-items: center; margin: 0 6px 0 0; padding: 5px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-xs); font-family: inherit; cursor: pointer; } .rdp-chip:hover:not(:disabled) { border-color: var(--color-primary); } .rdp-chip.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); } .rdp-chip:disabled { opacity: .45; cursor: default; }   .rdp-chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }   .rdp-chip-sep { width: 1px; align-self: stretch; margin: 4px 6px 4px 0; background: var(--color-border-default); }   .rdp-skeleton { padding: 0 16px; } .rdp-skeleton-card { display: flex; margin-top: 8px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); animation: rdp-pulse 1.2s ease-in-out infinite; } .rdp-skeleton-avatar { width: 28px; height: 28px; flex: none; border-radius: var(--radius-avatar); background: var(--color-border-default); } .rdp-skeleton-lines { display: flex; flex-direction: column; margin: 2px 0 0 12px; } .rdp-skeleton-line { height: 10px; margin-bottom: 6px; border-radius: 4px; background: var(--color-border-default); } .rdp-skeleton-line2 { width: 200px; margin-bottom: 4px; } .rdp-skeleton-line3 { width: 140px; height: 8px; margin-bottom: 0; } @keyframes rdp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .rdp-skeleton-card { animation: none; } }   .rdp-empty { display: flex; flex-direction: column; align-items: center; margin: 32px 16px 0; } .rdp-empty-icon { font-size: var(--font-3xl); margin-bottom: 12px; } .rdp-empty-text { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .rdp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; } .rdp-row { display: flex; margin-bottom: 8px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); cursor: pointer; } .rdp-row:hover { border-color: var(--color-primary); } .rdp-row.is-overdue { background: var(--color-error-surface); } .rdp-row.is-completed { background: var(--color-bg-sunken); opacity: .7; }   .rdp-row-level { width: 4px; flex: none; border-radius: 8px 0 0 8px; background: transparent; } .rdp-lv-overdue { background: var(--color-error); } .rdp-lv-warn { background: var(--color-warning); } .rdp-lv-done { background: var(--color-success); } .rdp-row-main { display: flex; flex: 1; min-width: 0; margin: 10px 12px 10px 8px; } .rdp-row-avatar { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; margin-right: 10px; border-radius: var(--radius-avatar); background: var(--color-border-default); font-size: var(--font-2xs); font-weight: 700; color: var(--color-text-secondary); } .rdp-row-body { flex: 1; min-width: 0; } .rdp-row-sender { display: flex; align-items: center; gap: 4px; color: var(--color-primary-on-surface); opacity: .7; } .rdp-row-sender-name { font-size: var(--font-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdp-row-subject { margin-top: 2px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdp-row-preview { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdp-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .rdp-row-theme { max-width: 120px; padding: 1px 4px; border-radius: 4px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdp-row-response { font-size: var(--font-2xs); color: var(--color-text-secondary); }   .rdp-row-progress { height: 4px; margin-top: 4px; border-radius: 2px; background: var(--color-border-default); overflow: hidden; } .rdp-row-progress-fill { display: block; height: 100%; border-radius: 2px; background: var(--color-success); }   .rdp-row-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .rdp-action { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-2xs); font-family: inherit; cursor: pointer; } .rdp-action:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); } .rdp-action:active:not(:disabled) { transform: scale(.98); } .rdp-action:disabled { cursor: default; opacity: .6; } .rdp-action-primary { border-color: transparent; background: var(--color-primary); color: var(--color-text-on-primary); }   .rdp-row-when { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin-left: 8px; } .rdp-row-relative { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .rdp-row.is-overdue .rdp-row-relative { color: var(--color-error); } .rdp-row.is-completed .rdp-row-relative { color: var(--color-success); } .rdp-row-absolute { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .home-branch-expander { margin-top: 8px; font-size: var(--font-xs); color: var(--color-primary-on-surface); cursor: pointer; } .home-footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 16px 0 4px; } .home-footer-link { font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; } .home-footer-link:hover { color: var(--color-primary-on-surface); }   .home-footer-powered { flex-basis: 100%; text-align: center; font-size: var(--font-xs); color: var(--color-text-disabled, var(--color-text-tertiary)); }     .toast-container.toast-pos-top-right { top: calc(var(--topbar-height) + 8px); right: 16px; left: auto; bottom: auto; align-items: flex-end; } .toast-container.toast-pos-top-left { top: calc(var(--topbar-height) + 8px); left: 16px; right: auto; bottom: auto; align-items: flex-start; } .toast-container.toast-pos-bottom-right { bottom: 16px; right: 16px; left: auto; top: auto; align-items: flex-end; } .toast-container.toast-pos-bottom-left { bottom: 16px; left: 16px; right: auto; top: auto; align-items: flex-start; } .toast-container.toast-pos-top-center { top: calc(var(--topbar-height) + 8px); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); align-items: center; }   .toast-container .toast-item.toast-off-toolbar { position: fixed; right: 16px; bottom: 92px; top: auto; left: auto; pointer-events: auto; }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { body:has(.space-tabs.space-tabs-top:not(.collapsed)) .toast-container.toast-pos-top-right, body:has(.space-tabs.space-tabs-top:not(.collapsed)) .toast-container.toast-pos-top-left, body:has(.space-tabs.space-tabs-top:not(.collapsed)) .toast-container.toast-pos-top-center { top: calc(var(--topbar-height) + var(--space-tabs-height) + 8px); } body:has(.space-tabs.space-tabs-top.collapsed) .toast-container.toast-pos-top-right, body:has(.space-tabs.space-tabs-top.collapsed) .toast-container.toast-pos-top-left, body:has(.space-tabs.space-tabs-top.collapsed) .toast-container.toast-pos-top-center { top: calc(var(--topbar-height) + var(--space-tabs-collapsed-height) + 8px); } }   .toast-progress { position: absolute; left: 0; right: 0; bottom: 3px;   height: 2px; overflow: hidden; background: rgba(0, 0, 0, .08); } .toast-progress-fill { height: 100%; width: 100%; background: currentColor; opacity: .45; transform-origin: left center; animation-name: toast-progress-shrink; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes toast-progress-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) {   .toast-progress-fill { animation: none; transform: scaleX(1); } }     .tr-header-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; } .tr-header-action { background: transparent; border: 0; border-radius: var(--radius-md); padding: 3px 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); cursor: pointer; } .tr-header-action { display: inline-flex; align-items: center; gap: 4px; } .tr-header-action:hover { background: var(--color-feature-timelog-surface); } .tr-header-action.active { color: var(--color-feature-timelog); font-weight: var(--weight-semibold); }   .tr-header-action.dimmed { opacity: .45; }   .tr-input-layout { display: flex; gap: var(--space-4); align-items: flex-start; } .tr-input-column { flex: 1 1 auto; max-width: 520px; } .tr-today-summary { display: flex; align-items: center; gap: var(--space-3); position: relative; margin-bottom: 14px;   padding: 10px 30px 10px 12px; border-radius: var(--radius-lg); background: var(--color-feature-timelog-surface); border: 1px solid var(--color-feature-timelog); } .tr-ring { width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-full); border: 3.5px solid var(--color-feature-timelog); display: flex; align-items: center; justify-content: center; } .tr-ring-value { font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-feature-timelog); } .tr-today-main { flex: 1 1 auto; } .tr-today-total { font-size: var(--font-lg); font-weight: var(--weight-bold); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; color: var(--color-text-primary); } .tr-today-label { font-size: var(--font-2xs); color: var(--color-text-secondary); } .tr-today-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .tr-goal-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-goal-link:hover { text-decoration: underline; } .tr-today-count { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-today-hide { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .tr-today-hide:hover { background: var(--color-bg-base); } .tr-mode-tabs { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 8px; } .tr-mode-tab { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 11px; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-mode-tab input { position: absolute; opacity: 0; width: 0; height: 0; } .tr-mode-tab:hover, .tr-mode-tab.active { background: var(--color-bg-sunken); } .tr-mode-tab.active { color: var(--color-feature-timelog); font-weight: var(--weight-semibold); } .tr-mode-tab svg, .tr-mode-icon { flex: 0 0 auto; }   .tr-mode-text { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }   .tr-mode-caption { font-size: inherit; font-weight: var(--weight-normal); color: var(--color-text-tertiary); white-space: nowrap; } .tr-mode-tab.active .tr-mode-caption { color: var(--color-text-secondary); } .tr-time-card { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--color-feature-timelog-surface); border: 1px solid var(--color-feature-timelog); } .tr-time-card.invalid { border-color: var(--color-error); background: var(--color-error-surface); } .tr-time-elapsed { flex: 1 1 auto; font-size: var(--font-xl); font-weight: var(--weight-bold); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; color: var(--color-feature-timelog); } .tr-time-card.invalid .tr-time-elapsed { color: var(--color-error); } .tr-time-icon { flex: 0 0 auto; color: var(--color-feature-timelog); } .tr-time-card.invalid .tr-time-icon { color: var(--color-error); } .tr-live { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 1px 5px; border-radius: var(--radius-md); background: var(--color-feature-timelog); color: var(--color-text-on-primary); font-size: 9px; font-weight: var(--weight-bold); animation: tr-live-pulse 1.2s ease-in-out infinite alternate; } .tr-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-on-primary); } @keyframes tr-live-pulse { from { opacity: 1; } to { opacity: .7; } } .tr-time-fields { display: inline-flex; align-items: center; gap: 3px; } .tr-time-input { width: 66px; height: 30px; text-align: center; border: 0; background: transparent; font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tr-time-sep { color: var(--color-text-tertiary); } .tr-validation { margin-bottom: 4px; text-align: center; font-size: var(--font-xs); color: var(--color-error); } .tr-prev-wrap { position: relative; } .tr-prev-link { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 12px; padding: 0; background: transparent; border: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-prev-time { color: var(--color-text-secondary); } .tr-prev-icon { flex: 0 0 auto; color: var(--color-text-tertiary); } .tr-prev-tip { flex-direction: column; align-items: flex-start; white-space: nowrap; } .tr-prev-tip { display: none; position: absolute; top: 100%; left: 0; z-index: var(--z-tooltip); gap: 6px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--color-bg-base); border: 1px solid var(--color-border-default); font-size: var(--font-2xs); color: var(--color-text-secondary); box-shadow: var(--shadow-sm); } .tr-prev-wrap:hover .tr-prev-tip { display: flex; } .tr-field-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; } .tr-field-label { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .tr-required { color: var(--color-error); margin-left: 2px; } .tr-more-toggle { width: 24px; height: 24px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .tr-more-toggle:hover { background: var(--color-bg-sunken); } .tr-more-popup { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 6px; border-radius: var(--radius-lg); background: var(--color-bg-base); border: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-switch { width: 32px; height: 16px; flex: 0 0 auto; border: 1px solid var(--color-border-muted); border-radius: var(--radius-full); background: var(--color-bg-sunken); cursor: pointer; position: relative; } .tr-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-text-tertiary); transition: left var(--duration-fast) var(--ease-default); } .tr-switch.on { background: var(--color-feature-timelog); border-color: var(--color-feature-timelog); } .tr-switch.on::after { left: 17px; background: var(--color-bg-base); } .tr-input-border { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 2px 8px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); } .tr-input-border:focus-within { border-color: var(--color-feature-timelog); border-width: 2px; padding: 1px 7px; }   .tr-input-column > .tr-input-border { margin-bottom: 20px; } .tr-input-border { position: relative; } .tr-input-icon { flex: 0 0 auto; color: var(--color-text-tertiary); }   .tr-input-catbar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-md) 0 0 var(--radius-md); } .tr-input-border input, .tr-input-border textarea, .tr-input-border select { flex: 1 1 auto; min-width: 0; height: 32px; border: 0; background: transparent; font-size: var(--font-base); color: var(--color-text-primary); } .tr-input-border textarea { height: auto; min-height: 56px; padding: 6px 0; } .tr-distance { justify-content: space-between; } .tr-unit { font-size: var(--font-sm); color: var(--color-text-tertiary); } .tr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: -14px 0 0; } .tr-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; overflow: hidden; padding: 4px 8px 4px 0; border: 0; border-radius: 14px; cursor: pointer; background: var(--color-feature-timelog-surface); font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-chip-bar { flex: 0 0 auto; width: 4px; align-self: stretch; border-radius: 14px 0 0 14px; } .tr-chip:not(:has(.tr-chip-bar)) { padding-left: 8px; } .tr-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-chip:hover { background: var(--color-primary-surface); } .tr-chip.selected { background: var(--color-primary-surface); border-color: var(--color-primary); } .tr-detail { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); } .tr-detail-toggle { width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-detail-toggle { display: flex; align-items: center; gap: 6px; } .tr-detail-chevron { flex: 0 0 auto; color: var(--color-feature-timelog); transform: rotate(-90deg); transition: transform .15s ease; } .tr-detail-toggle.open .tr-detail-chevron { transform: rotate(0deg); } .tr-detail-toggle:hover { background: var(--color-bg-sunken); } .tr-detail-body { max-height: 260px; overflow-y: auto; padding: 0 12px 12px; } .tr-group-label { margin: 8px 0 4px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .tr-sub-label { margin: 0 0 3px 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-duration-row { display: flex; align-items: center; gap: 6px; margin: 0 0 12px 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-duration-note { font-size: var(--font-2xs); } .tr-duration-value { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .tr-divider { border: 0; border-top: 1px solid var(--color-border-default); margin: 0 0 10px; } .tr-register { width: 100%; height: 40px; margin-top: 16px; border: 0; border-radius: var(--radius-lg); cursor: pointer; background: var(--color-feature-timelog); color: var(--color-text-on-primary); font-size: var(--font-base); font-weight: var(--weight-semibold); } .tr-register:hover:not(:disabled) { background: var(--color-feature-timelog-dark); } .tr-register:disabled { opacity: .4; cursor: default; } .tr-register-success { margin-top: 6px; padding: 8px; border-radius: var(--radius-lg); text-align: center; background: var(--color-feature-timelog); color: var(--color-text-on-primary); font-size: var(--font-md); font-weight: var(--weight-semibold); } .tr-undo { display: block; margin: 4px auto 0; padding: 6px 10px; background: transparent; border: 0; cursor: pointer; font-size: var(--font-xs); color: var(--color-error); } .tr-today-timeline { margin-top: 12px; } .tr-today-timeline-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tr-today-timeline-count { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-timeline-list, .tr-record-list, .tr-chart-groups, .tr-category-list, .tr-ratio-list, .tr-report-timeline, .tr-day-bars, .tr-week-rows, .tr-heatmap-cells, .tr-target-chips, .tr-sorter-list, .tr-edition-tab-list, .tr-edition-tree, .tr-legend-list, .tr-template-list, .tr-google-accounts, .tr-google-calendars { list-style: none; margin: 0; padding: 0; } .tr-timeline-item { display: flex; align-items: center; gap: 8px; position: relative; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--color-bg-elevated); margin-bottom: 2px; } .tr-timeline-item.vacant { background: var(--color-warning-surface); } .tr-timeline-time { font-size: var(--font-2xs); color: var(--color-text-tertiary); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; } .tr-timeline-title { flex: 1 1 auto; font-size: var(--font-xs); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-vacant-label { font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-warning); } .tr-gap-record { padding: 3px 10px; border: 0; border-radius: var(--radius-sm); background: var(--color-warning); color: var(--color-bg-base); font-size: var(--font-2xs); font-weight: var(--weight-semibold); cursor: pointer; } .tr-row-menu { width: 24px; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .tr-context-menu { position: absolute; right: 0; top: 100%; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: 180px; padding: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .tr-context-menu > button { text-align: left; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-primary); } .tr-context-menu > button:hover { background: var(--color-bg-sunken); } .tr-context-menu > button.danger { color: var(--color-error); } .tr-empty { padding: 14px; text-align: center; } .tr-empty-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 200px; }   .tr-empty-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; min-height: 0; } .tr-empty-icon { margin-bottom: 12px; color: var(--color-text-tertiary); }   .tr-readonly-mark { display: inline-flex; align-items: center; margin-right: 10px; color: var(--color-text-tertiary); } .tr-empty > div:first-child { font-size: var(--font-md); color: var(--color-text-secondary); } .tr-empty-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .tr-lap-idle, .tr-lap-break-pane { margin-bottom: 14px; padding: 20px; border-radius: var(--radius-lg); background: var(--color-bg-sunken); text-align: center; } .tr-lap-idle-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 4px; } .tr-lap-idle-sub { font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: 14px; } .tr-lap-start, .tr-lap-resume { padding: 8px 22px; border: 0; border-radius: 20px; cursor: pointer; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); background: linear-gradient(135deg, var(--color-feature-timelog), var(--color-feature-timelog-dark)); } .tr-lap-resume { min-width: 200px; } .tr-lap-active { margin-bottom: 14px; padding: 20px; border-radius: var(--radius-lg); text-align: center; background: linear-gradient(to bottom right, var(--color-feature-timelog), var(--color-feature-timelog-dark)); color: var(--color-text-on-primary); } .tr-lap-live { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-sm); font-weight: var(--weight-semibold); margin-bottom: 4px; } .tr-lap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-on-primary); animation: tr-lap-blink 1.5s ease-in-out infinite; } @keyframes tr-lap-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .tr-lap-elapsed { font-size: var(--font-3xl); font-weight: var(--weight-bold); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; margin: 2px 0; } .tr-lap-startat { font-size: var(--font-xs); opacity: 0.85; margin-bottom: 14px; } .tr-lap-actions { display: flex; gap: 8px; } .tr-lap-break, .tr-lap-next { flex: 1 1 0; padding: 8px 12px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-sm); } .tr-lap-break { background: transparent; color: var(--color-text-on-primary); border: 1px solid var(--color-overlay-white-40); } .tr-lap-next { background: var(--color-text-on-primary); color: var(--color-feature-timelog); border: 0; font-weight: var(--weight-semibold); } .tr-lap-break-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-bottom: 4px; } .tr-lap-break-elapsed { font-size: var(--font-2xl); color: var(--color-text-secondary); margin-bottom: 2px; font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; } .tr-lap-break-pane .tr-lap-startat { color: var(--color-text-tertiary); margin-bottom: 12px; }   .tr-measure-list { margin: 10px 0 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .tr-measure-head { padding: 8px 12px 4px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tr-measure-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; } .tr-measure-row:hover { background: var(--color-bg-sunken); } .tr-measure-mark { width: 18px; font-size: var(--font-xs); } .tr-measure-mark.ok { color: var(--color-feature-timelog); } .tr-measure-mark.ng { color: var(--color-error); } .tr-measure-main { flex: 1 1 auto; font-size: var(--font-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-measure-main.ng { color: var(--color-error); } .tr-measure-range { font-size: var(--font-xs); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; color: var(--color-text-secondary); } .tr-measure-duration { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-measure-registered { padding: 1px 6px; border-radius: 3px; background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); font-size: var(--font-2xs); }   .tr-quick-pane { margin-bottom: 6px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .tr-quick-input { width: 100%; min-height: 100px; max-height: 180px; border: 0; background: transparent; padding: 8px 10px; font-size: var(--font-sm); font-family: "Cascadia Code", Consolas, "Segoe UI", sans-serif; resize: vertical; } .tr-quick-guide > summary { font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; } .tr-quick-guide-body > div { display: flex; gap: 12px; font-size: var(--font-xs); color: var(--color-text-tertiary); margin: 1px 0; } .tr-quick-guide-body code { font-family: "Cascadia Code", Consolas, monospace; } .tr-quick-guide-body span { color: var(--color-text-secondary); } .tr-quick-hint { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }       .tr-schedule-hero { display: flex; align-items: flex-start; gap: 12px; margin: -6px -18px 12px; padding: 16px 16px 16px 24px; background: linear-gradient(100deg, var(--color-feature-timelog) 0%, var(--color-feature-timelog-dark) 60%, var(--color-feature-timelog-deep) 100%); color: var(--color-text-on-primary); } .tr-schedule-hero-icon { flex: 0 0 auto; margin-top: 2px; } .tr-schedule-hero-text { flex: 1 1 auto; min-width: 0; } .tr-schedule-hero-title { font-size: var(--font-lg); font-weight: var(--weight-bold); } .tr-schedule-hero-sub { margin-top: 4px; font-size: var(--font-xs); color: rgba(255,255,255,.7); } .tr-schedule-hero-close { flex: 0 0 auto; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.15); color: var(--color-text-on-primary); } .tr-schedule-hero-close:hover { background: rgba(255,255,255,.25); } .tr-schedule { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }   .feature-page.tr-page-fullbleed { padding: 0; } .tr-page-fullbleed .tr-schedule-hero { margin: 0 0 12px; } .tr-page-fullbleed .tr-schedule-bar { margin-left: 20px; margin-right: 20px; } .tr-page-fullbleed .tr-legend { margin-left: 32px; margin-right: 32px; } .tr-page-fullbleed .tr-list-toolbar, .tr-page-fullbleed .tr-list { margin-left: 20px; margin-right: 20px; }   .tr-schedule-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; margin-bottom: 8px; } .tr-schedule-nav, .tr-schedule-center, .tr-schedule-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; } .tr-schedule-nav { flex: 0 0 auto; } .tr-schedule-center { flex: 1 1 auto; min-width: 0; overflow: hidden; }   .tr-schedule-right { flex: 0 0 auto; margin-left: auto; gap: var(--space-3); }   .tr-date-jump-caret { flex: 0 0 auto; margin-left: 6px; color: var(--color-text-tertiary); } .tr-today-btn { height: 32px; padding: 0 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; font-size: var(--font-sm); } .tr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--color-text-secondary); } .tr-icon-btn:hover { background: var(--color-primary-surface-light); } .tr-date-jump { display: inline-flex; align-items: center; white-space: nowrap; padding: 4px 8px; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tr-date-jump:hover { background: var(--color-primary-surface-light); } .tr-date-jump-popup { position: absolute; z-index: var(--z-dropdown); padding: 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }   .tr-member-picker { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 4px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .tr-member-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .tr-member-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-2xs); } .tr-member-picker .tr-member-select { border: 0; background: transparent; height: 30px; } .tr-visible-total { padding: 3px 8px; border-radius: var(--radius-md); background: var(--color-bg-sunken); font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tr-member-select { height: 32px; min-width: 140px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .tr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-sunken); cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tr-pill:not(.on) { opacity: .4; } .tr-pill:hover { border-color: var(--color-primary); } .tr-dot { width: 10px; height: 10px; border-radius: 3px; } .tr-dot-record { background: var(--color-primary); } .tr-dot-event { background: var(--color-feature-message); } .tr-dot-task { background: var(--color-feature-task); } .tr-pill-count { padding: 0 5px; border-radius: 8px; background: var(--color-bg-base); font-size: var(--font-2xs); font-weight: var(--weight-normal); color: var(--color-text-secondary); } .tr-segment { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--color-bg-sunken); } .tr-seg-btn { min-width: 44px; padding: 5px 12px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-seg-btn.active { background: var(--color-bg-base); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .tr-overflow { font-weight: var(--weight-bold); }   .tr-popup-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); background: transparent; } .tr-overflow-popup, .tr-template-popup, .tr-google-popup, .tr-column-popup { position: absolute; right: 0; z-index: var(--z-dropdown);   min-width: 240px; max-width: 420px; padding: 6px; margin-top: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .tr-overflow-group-label { margin: 4px 6px 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }   .tr-popup-scroll { display: flex; flex-direction: column;   max-height: calc(100vh - 300px); min-height: 200px; } .tr-popup-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .tr-popup-close { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--color-text-tertiary); font-size: var(--font-md); } .tr-popup-close:hover { background: var(--color-bg-sunken); }   .tr-popup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   .tr-popup-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-base); } .tr-overflow-row { display: flex; align-items: center; gap: 6px; margin: 4px; flex-wrap: wrap; } .tr-overflow-key { width: 52px; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-overflow-note { margin: 4px 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-tool-chip { display: block; height: 32px; margin: 0 4px 4px; padding: 0 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-tool-chip.on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .tr-seg-radio { display: inline-flex; align-items: center; gap: 3px; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: var(--font-sm); } .tr-seg-radio input { position: absolute; opacity: 0; width: 0; height: 0; } .tr-seg-radio:has(input:checked) { background: var(--color-bg-base); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); }       .tr-calendar { position: relative; min-height: 320px; margin: 5px 32px; display: flex; flex-direction: column; flex: 1 1 auto; }   .tint-holiday { background-color: rgba(229, 72, 77, .063); }   .tint-sunday { background-color: rgba(229, 72, 77, .039); }   .tint-saturday { background-color: rgba(59, 130, 246, .039); }     .tr-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-base); } .tr-grid-head { display: flex; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); }   .tr-grid-ruler-head { flex: 0 0 64px; } .tr-grid-dayhead { flex: 1 1 0; min-width: 0; height: 40px;     display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-grid-dayhead.today { font-weight: var(--weight-bold); color: var(--color-feature-timelog); } .tr-grid-daynum { font-weight: var(--weight-semibold); } .tr-grid-dow { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-grid-holiday { font-size: var(--font-2xs); color: var(--color-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .tr-grid-allday { display: flex; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .tr-grid-allday-col { flex: 1 1 0; min-width: 0; padding: 2px; border-left: 1px solid var(--color-border-default); display: flex; flex-direction: column; gap: 2px; } .tr-allday-label { padding: 4px 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-grid-allday .tr-grid-ruler-head { display: flex; align-items: center; gap: 2px; padding-left: 4px; } .tr-allday-toggle { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); }   .tr-allday-more { align-self: flex-start; margin-top: 1px; padding: 0 4px; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-allday-more:hover { background: var(--color-bg-sunken); }   .tr-segment-sm .tr-seg-radio { padding: 2px 8px; font-size: var(--font-xs); }       .tr-grid-body { display: flex; align-items: flex-start; position: relative; flex: 1 1 auto; min-height: 240px; overflow-y: auto; } .tr-grid-ruler { position: relative; flex: 0 0 64px; } .tr-grid-ruler-cell { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-border-default); font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-grid-ruler-cell > span { position: relative; top: -1px; padding-left: 6px; background: var(--color-bg-base); } .tr-grid-col { position: relative; flex: 1 1 0; min-width: 0; border-left: 1px solid var(--color-border-default); margin: 0; padding: 0; list-style: none; }   .tr-event-rows .tr-record-card { border-left: 3px solid var(--color-google-brand); }   .tr-grid-band { position: absolute; left: 0; right: 0; background: rgba(120, 125, 140, .18); pointer-events: none; }   .tr-grid-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--color-border-default); pointer-events: none; }   .tr-grid-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--color-error); z-index: 3; pointer-events: none; } .tr-grid-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-error); }     .tr-grid-vacant { position: absolute; left: 2px; right: 2px; z-index: 1; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1px 4px; border: 1.5px solid var(--color-unrecorded); border-radius: 3px; background: repeating-linear-gradient(45deg, var(--color-unrecorded-stripe) 0 1.5px, transparent 1.5px 8px), var(--color-unrecorded-surface); cursor: pointer; font-size: var(--font-xs); } .tr-grid-vacant .tr-vacant-label { font-weight: var(--weight-bold); color: var(--color-unrecorded-dark); } .tr-vacant-sub { font-size: var(--font-2xs); color: var(--color-unrecorded-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .tr-grid-hit { position: absolute; inset: 0; z-index: 0; cursor: crosshair; }   .tr-chip-resize { position: absolute; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 1; } .tr-chip-resize.top { top: 0; } .tr-chip-resize.bottom { bottom: 0; } .tr-grid-chip:hover .tr-chip-resize { background: rgba(255, 255, 255, .35); }   .tr-list-group { display: flex; align-items: center; justify-content: space-between; margin: 16px 2px 6px; } .tr-list-group-label { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tr-list-group-total { font-size: var(--font-sm); color: var(--color-text-secondary); }   .tr-grid-chip { position: absolute; z-index: 2; overflow: hidden; display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: flex-start; column-gap: var(--space-2);   margin: 0.5px 0;   padding: 2px 3px; border-radius: 4px; cursor: pointer; border: 1px solid var(--color-overlay-white-14); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); line-height: 1.25; } .tr-chip-main { display: block; flex: 0 0 auto; width: 100%; }   .tr-grid-chip .tr-cal-title { display: block; font-size: var(--font-xs); font-weight: var(--weight-semibold); overflow: hidden; white-space: normal; overflow-wrap: anywhere; }   .tr-grid-chip .tr-cal-title:has(+ .tr-cal-content) { white-space: nowrap; text-overflow: ellipsis; } .tr-grid-chip .tr-cal-content { display: block; font-size: var(--font-2xs); font-weight: var(--weight-medium); overflow: hidden; white-space: normal; overflow-wrap: anywhere; } .tr-grid-chip .tr-cal-time { flex: 0 0 auto; width: 100%; margin-top: auto; padding-top: 2px; opacity: .85; } .tr-grid-chip .tr-cal-badge { display: inline-block; margin-bottom: 1px; padding: 0 3px; border-radius: 3px; background: var(--color-overlay-white-22); color: inherit; font-size: var(--font-2xs); font-weight: var(--weight-semibold); }   .tr-chip-1 .tr-grid-chip .tr-cal-badge { background: var(--color-overlay-black-08); }   .tr-event-detail { margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--color-bg-base); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); } .tr-event-detail-head { display: flex; align-items: center; gap: 8px; } .tr-event-detail-title { flex: 1 1 auto; font-size: var(--font-sm); font-weight: var(--weight-semibold); } .tr-event-detail-meta { display: flex; gap: 12px; margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-event-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }   .tr-month { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-base); } .tr-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); } .tr-month-dow { padding: 6px 0; text-align: center; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-month-body { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(84px, auto); margin: 0; padding: 0; list-style: none; } .tr-month-cell { border-left: 1px solid var(--color-border-default); border-top: 1px solid var(--color-border-default); padding: 3px; cursor: pointer; overflow: hidden; } .tr-month-cell:first-child, .tr-month-cell:nth-child(7n + 1) { border-left: 0; } .tr-month-cell.outside { opacity: .45; } .tr-month-cell.today { box-shadow: inset 0 0 0 2px var(--color-feature-timelog); } .tr-month-cell:hover { background: var(--color-bg-sunken); } .tr-month-daynum { display: flex; align-items: baseline; gap: 4px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .tr-month-holiday { font-size: var(--font-2xs); font-weight: var(--weight-normal); color: var(--color-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-month-chip { display: flex; gap: 4px; margin-top: 2px; padding: 0 4px; border-radius: 3px; background: var(--color-primary); color: var(--color-bg-base); font-size: var(--font-2xs); overflow: hidden; } .tr-chip-1 .tr-month-chip { background: var(--color-primary-surface); color: var(--color-text-primary); } .tr-month-chip-time { flex: 0 0 auto; opacity: .85; } .tr-month-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-month-more { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .tr-cal-chip { display: flex; align-items: center; gap: 8px; overflow: hidden; margin-bottom: 1px; padding: 2px 6px; border-radius: 4px; cursor: pointer; background: var(--color-primary); color: var(--color-bg-base); } .tr-chip-1 .tr-cal-chip { background: var(--color-primary-surface); color: var(--color-text-primary); border-left: 4px solid var(--color-primary); } .tr-cal-chip.vacant { background: var(--color-warning-surface); color: var(--color-warning); border: 1.5px solid var(--color-warning); } .tr-cal-badge { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .22); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .tr-cal-title { flex: 1 1 auto; font-size: var(--font-xs); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-cal-time { font-size: var(--font-2xs); opacity: .85; }       .tr-cal-event { background: var(--color-google-brand-surface); color: var(--color-text-primary); border-left: 0; }     .tr-cal-source { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; background: var(--color-google-brand-surface); color: var(--color-google-brand); font-size: var(--font-2xs); font-weight: var(--weight-semibold); }   .tr-chip-0 .tr-grid-chip .tr-cal-source, .tr-chip-0 .tr-cal-chip .tr-cal-source { background: var(--color-overlay-white-22); color: var(--color-text-on-primary); }   .tr-chip-0 .tr-grid-chip.tr-cal-event .tr-cal-source, .tr-chip-0 .tr-cal-chip.tr-cal-event .tr-cal-source { background: var(--color-google-brand-surface); color: var(--color-google-brand); } .tr-cal-badge-event { background: var(--color-google-brand); color: var(--color-text-on-primary); } .tr-cal-badge-record { background: var(--color-feature-timelog); color: var(--color-text-on-primary); }   .tr-grid-chip.selected { outline: 2px solid var(--color-feature-timelog); outline-offset: -2px; }   .tr-google-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px; }     .tr-cal-task { background: var(--color-feature-task-surface); color: var(--color-text-primary); border-left: 0; cursor: default; } .tr-cal-badge-task { background: var(--color-feature-task); color: var(--color-text-on-primary); } .tr-cal-event .tr-icon-btn, .tr-cal-event .tr-link-btn { font-size: var(--font-2xs); white-space: nowrap; } .tr-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border-default); }   .tr-shape-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-shape-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; } .tr-shape-key.filled { background: var(--color-text-secondary); } .tr-shape-key.outlined { background: var(--color-bg-base); border: 2px solid var(--color-text-secondary); margin-left: 6px; }   .tr-period-totals { margin: 0 0 6px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); } .tr-period-totals-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tr-period-totals-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tr-period-totals-count { font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-period-totals-by { margin-left: 4px; } .tr-period-totals-total { margin-left: auto; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }   .tr-period-totals-bar { display: flex; height: 10px; margin-top: 8px; border-radius: 5px; overflow: hidden; } .tr-period-totals-part { display: block; flex: 1 1 0; min-width: 2px; } .tr-period-totals-part.divided { box-shadow: inset 2px 0 0 var(--color-bg-base); } .tr-period-totals-list { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; padding: 0; list-style: none; } .tr-period-totals-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: var(--radius-md); background: var(--color-bg-sunken); cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-period-totals-item:hover:not(:disabled) { background: var(--color-primary-surface-light); } .tr-period-totals-item.on { font-weight: var(--weight-bold); } .tr-period-totals-item.others { cursor: default; } .tr-period-totals-item strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); } .tr-period-totals-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .tr-period-totals-all { display: inline-block; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-primary-dark); } .tr-period-totals-all:hover { text-decoration: underline; }   .tr-grid-chip.tr-dimmed { opacity: .3; } .tr-legend-list { display: flex; flex-wrap: wrap; gap: 8px; }   .tr-legend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: var(--radius-md); background: var(--color-bg-sunken); cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .tr-legend-chip:hover { background: var(--color-primary-surface-light); } .tr-legend-chip.off { opacity: .4; } .tr-legend-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 6px; }   .tr-legend-main { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; } .tr-legend-bell { display: inline-flex; align-items: center; justify-content: center; margin: 0 -4px 0 4px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-text-secondary); }   .tr-legend-bell.muted { color: var(--color-text-tertiary); opacity: .55; }   .tr-event-allday { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: var(--font-sm); color: var(--color-text-secondary); cursor: pointer; } .tr-event-allday input { accent-color: var(--color-primary); }   .tr-fab { position: absolute; right: 32px; bottom: 32px; width: 56px; height: 56px; border: 0; border-radius: 28px; cursor: pointer; background: var(--color-primary); color: var(--color-bg-base); font-size: var(--font-xl); box-shadow: var(--shadow-md); } .tr-fab:hover { background: var(--color-primary-dark); } .tr-add-menu { position: absolute; right: 32px; bottom: 100px; z-index: var(--z-dropdown); width: 212px; padding: 6px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 14px; box-shadow: var(--shadow-md); } .tr-add-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; } .tr-add-row:hover { background: var(--color-bg-sunken); } .tr-add-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .tr-add-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-list-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 8px; }   .tr-list-scroll { display: contents; } .tr-list-fields-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-field-chip { padding: 5px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-field-chip.on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .tr-search { display: inline-flex; align-items: center; height: 32px; min-width: 240px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); } .tr-search-input { flex: 1 1 auto; min-width: 0; height: 22px; border: 0; background: transparent; font-size: var(--font-sm); } .tr-record-card { margin-bottom: 8px; padding: 10px 14px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-base); } .tr-record-card.selected { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .tr-record-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tr-record-time { border: 0; border-bottom: 1px solid var(--color-border-default); background: transparent; font-size: var(--font-sm); } .tr-record-sep { color: var(--color-text-tertiary); } .tr-record-duration { margin-left: auto; padding: 3px 8px; border-radius: var(--radius-md); background: var(--color-bg-sunken); font-size: var(--font-sm); font-weight: var(--weight-semibold); } .tr-record-field { margin-top: 8px; } .tr-record-field input, .tr-record-field textarea, .tr-record-field select { width: 100%; border: 0; border-bottom: 1px solid var(--color-border-default); background: transparent; font-size: var(--font-sm); } .tr-duration-bar { position: relative; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--color-bg-sunken); } .tr-duration-bar-fill { display: block; height: 4px; border-radius: 2px; background: var(--color-primary); }   .tr-edit-panel { margin-top: 12px; padding: 16px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-elevated); flex: 0 1 auto; min-height: 120px; overflow-y: auto; } .tr-edit-head { font-size: var(--font-md); font-weight: var(--weight-semibold); margin-bottom: 12px; } .tr-edit-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } .tr-upper { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-upper-block { display: inline-flex; align-items: baseline; gap: 3px; } .tr-upper-kind { font-size: var(--font-2xs); } .tr-upper-limit, .tr-upper-value { font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-primary); } .tr-upper-unit { font-size: var(--font-2xs); }   .tr-upper-config-btn { background: none; border: 0; padding: 0 6px; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .tr-upper-config-btn:hover { text-decoration: underline; } .tr-upper-config .modal-header { align-items: flex-start; } .tr-upper-config-heading { display: flex; flex-direction: column; gap: 2px; } .tr-upper-config-sub { margin: 0; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-upper-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; } .tr-upper-item-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); cursor: pointer; text-align: left; font-size: var(--font-xs); } .tr-upper-item.selected .tr-upper-item-btn { border-color: var(--color-primary); background: var(--color-primary-surface); } .tr-upper-item-user { flex: 1 1 auto; color: var(--color-text-primary); } .tr-upper-item-kind, .tr-upper-item-limit { flex: 0 0 auto; color: var(--color-text-secondary); } .tr-upper-new { align-self: flex-start; margin-bottom: 12px; } .tr-upper-readonly { font-size: var(--font-base); color: var(--color-text-primary); } .tr-upper-hint { margin: 4px 0 0; font-size: var(--font-xs); color: var(--color-primary-on-surface); } .tr-upper-time-inputs { display: flex; align-items: center; gap: 4px; } .tr-upper-time-inputs input { width: 72px; } .tr-upper-delete { margin-right: auto; }     .tr-candidates-scrim { z-index: calc(var(--z-modal) + 1); } .tr-candidates { z-index: calc(var(--z-modal) + 2); border: 1px solid var(--color-border-default); } .tr-candidates .modal-body { min-width: 380px; } .tr-candidate-list { max-height: 350px; overflow-y: auto; margin: 8px 0 0; padding: 0; list-style: none; } .tr-candidates-head { margin: 0 0 4px 10px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .tr-candidate { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; } .tr-candidate:hover { background: var(--color-primary-surface); } .tr-candidate-title { padding: 5px 8px; border-radius: 13px; background: var(--color-bg-sunken); font-size: var(--font-xs); }   .tr-report { display: flex; flex-direction: column; gap: var(--space-3); } .tr-admin-note { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-report-bar, .tr-report-nav, .tr-chart-actions, .tr-view-mode { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .tr-period-label { font-size: var(--font-md); font-weight: var(--weight-semibold); }   .tr-period-label-text { color: var(--color-text-primary); } .tr-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--color-border-default); border-radius: 5px; } .tr-notice-text { flex: 1 1 auto; font-size: var(--font-sm); white-space: pre-wrap; } .tr-notice textarea { flex: 1 1 auto; } .tr-notice-actions { display: flex; gap: 6px; } .tr-privacy-note { font-size: var(--font-xs); color: var(--color-primary-on-surface); } .tr-ps-label { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .tr-report-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tr-report-kpi { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 12px 16px; } .tr-report-kpi-label { font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-report-kpi-label small { color: var(--color-text-tertiary); margin-left: 6px; } .tr-report-kpi-value { font-size: 26px; font-weight: var(--weight-bold); margin-top: 2px; color: var(--color-text-primary); }   .tr-report-kpi-sub { font-size: var(--font-xs); color: var(--color-text-tertiary); min-height: 1.5em; } .tr-report-themes { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; } .tr-report-themes-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); } .tr-report-themes-head b { font-size: var(--font-base); } .tr-report-themes-note { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-report-themes-spacer { flex: 1; } .tr-report-themes-all { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-primary-dark); } .tr-report-theme-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 70px 50px minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--color-border-default); } .tr-report-theme-row:last-child { border-bottom: 0; } .tr-report-theme-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--font-base); font-weight: var(--weight-semibold); } .tr-report-theme-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-report-theme-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .tr-report-theme-hours { font-size: var(--font-base); font-weight: var(--weight-bold); text-align: right; } .tr-report-theme-percent { font-size: var(--font-xs); color: var(--color-text-tertiary); text-align: right; } .tr-report-theme-track { height: 10px; border-radius: 5px; background: var(--color-bg-sunken); } .tr-report-theme-track i { display: block; height: 10px; border-radius: 5px; } .tr-report-theme-row.is-others .tr-report-theme-name { color: var(--color-text-secondary); font-weight: var(--weight-normal); } .tr-chart-group { padding: 12px 0; border-top: 1px solid var(--color-border-default); } .tr-chart-head { display: flex; align-items: center; gap: 8px; } .tr-chart-kind { font-size: var(--font-3xs, 9px); color: var(--color-text-tertiary); } .tr-chart-title { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-tertiary); } .tr-chart-desc { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-chart-metrics { display: flex; gap: var(--space-5); margin-top: 12px; } .tr-metric { font-size: var(--font-md); font-weight: var(--weight-semibold); } .tr-fix-workday { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-progress-note { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-chart-columns { display: flex; gap: var(--space-8); } .tr-category-list > li { display: flex; gap: 12px; padding: 3px 5px; font-size: var(--font-sm); } .tr-ratio-list > li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: var(--font-sm); } .tr-ratio-name { width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-ratio-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--color-bg-sunken); } .tr-ratio-fill { display: block; height: 8px; border-radius: 4px; background: var(--color-primary); } .tr-ratio-value { width: 44px; text-align: right; } .tr-report-timeline > li { padding: 2px 4px; font-size: var(--font-xs); } .tr-day-chart-axis { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-day-bars > li, .tr-week-rows > li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: var(--font-xs); } .tr-day-label { width: 64px; color: var(--color-text-tertiary); } .tr-day-track { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--color-bg-sunken); } .tr-day-fill { display: block; height: 8px; border-radius: 4px; background: var(--color-primary-light); } .tr-day-value { width: 48px; text-align: right; } .tr-quality, .tr-heatmap, .tr-narrative, .tr-gap-analysis, .tr-approval-stats { padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-bg-sunken); } .tr-narrative { background: var(--color-success-surface); } .tr-heatmap-cells { display: flex; flex-wrap: wrap; gap: 2px; } .tr-heat-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--color-bg-base); } .tr-heat-1 { background: var(--color-primary-surface); } .tr-heat-2 { background: var(--color-primary-muted); } .tr-heat-3 { background: var(--color-primary-light); } .tr-heat-4 { background: var(--color-primary); } .tr-shortcut-hint { margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-group-target { margin-top: 16px; padding: 10px 15px; border: 1px solid var(--color-border-default); border-radius: 3px; } .tr-group-target-head { display: flex; align-items: center; gap: 6px; } .tr-target-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .tr-target-chips > li { padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: 13px; font-size: var(--font-xs); } .tr-sorter-list > li { padding: 10px 20px; border-bottom: 1px solid var(--color-border-muted); cursor: grab; font-size: var(--font-sm); }   .tr-approval { display: flex; flex-direction: column; gap: var(--space-3); } .tr-approval-title { font-size: var(--font-xl); font-weight: var(--weight-bold); } .tr-approval-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-bg-sunken); } .tr-column-chooser { position: relative; } .tr-link-btn { background: none; border: 0; padding: 4px 6px; cursor: pointer; font-size: var(--font-xs); color: var(--color-primary-on-surface); } .tr-edition-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px 0; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); } .tr-edition-tab-list { display: flex; gap: 2px; flex: 1 1 auto; overflow-x: auto; } .tr-edition-tab { padding: 6px 12px; border: 0; border-radius: 6px 6px 0 0; background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-edition-tab.active { background: var(--color-bg-base); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-primary); } .tr-confirm-btn { padding: 4px 10px; border: 0; border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning); font-size: var(--font-2xs); font-weight: var(--weight-bold); cursor: pointer; } .tr-approval-grid th { background: var(--color-bg-sunken); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .tr-approval-grid td { font-size: var(--font-xs); } .tr-approval-select { border: 0; background: transparent; font-size: var(--font-xs); font-weight: var(--weight-semibold); } .tr-approval-badge { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-warning); } .tr-approval-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .tr-footer-count, .tr-footer-billing { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tr-footer-billing { color: var(--color-feature-tracking); } .tr-menu-anchor { position: relative; } .tr-edition-tree > li { display: flex; align-items: center; gap: 7px; position: relative; padding: 9px 8px; border-radius: var(--radius-md); } .tr-edition-row.shown { background: var(--color-primary-surface); } .tr-edition-name { font-size: var(--font-sm); font-weight: var(--weight-semibold); } .tr-badge-confirmed { padding: 1px 5px; border-radius: 4px; background: var(--color-primary); color: var(--color-bg-base); font-size: 9px; font-weight: var(--weight-bold); } .tr-badge-shown { padding: 1px 5px; border-radius: 4px; background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: 9px; font-weight: var(--weight-bold); } .tr-edition-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-confirm-row { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--color-border-default); } .tr-confirm-key { width: 78px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .tr-warn-note { margin-top: 10px; font-size: var(--font-2xs); color: var(--color-warning); } .tr-suppress-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--font-sm); color: var(--color-text-secondary); } .tr-google-accounts > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px; font-size: var(--font-xs); } .tr-google-calendars > li { padding: 3px 6px; font-size: var(--font-sm); } .tr-template-list > li > button { display: block; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: var(--font-sm); } .tr-template-list > li > button:hover { background: var(--color-bg-sunken); } @media (max-width: 900px) { .tr-input-layout { flex-direction: column; } .tr-chart-columns { flex-direction: column; } }       .tr-embedded { padding: 6px 18px 18px; min-height: 100%; box-sizing: border-box; } .tr-embedded .feature-page { padding: 0; height: auto; overflow: visible; }   .tr-embedded .feature-header { margin: 0 0 20px; }   .tr-embedded .auth-guard { min-height: 320px; }   .tr-embedded .tr-input-column { max-width: none; width: 100%; }   .panel-content-flush > .settings-layout { height: 100%; }     .feature-page.is-shelf-mode .rt-filter-card, .feature-page.is-shelf-mode .tracking-layout { display: none; } .rt-shelves { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .rt-shelf { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; }   .rt-shelf.is-unassigned { border-left: 4px solid var(--color-warning); } .rt-shelf-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); } .rt-shelf-name { font-size: var(--font-base); font-weight: var(--weight-bold); } .rt-shelf-count { font-size: var(--font-sm); color: var(--color-text-secondary); } .rt-shelf-reason { font-size: var(--font-xs); color: var(--warning-on-surface); } .rt-shelf-spacer { flex: 1; } .rt-shelf-older { font-size: var(--font-xs); color: var(--color-text-tertiary); } .rt-shelf-list { list-style: none; margin: 0; padding: 0; } .rt-shelf-piece { border-bottom: 1px solid var(--color-border-default); } .rt-shelf-piece:last-child { border-bottom: 0; } .rt-shelf-piece-open { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 10px 14px; min-height: 44px; color: var(--color-text-primary); } .rt-shelf-piece-open:hover { background: var(--color-primary-surface-light); } .rt-shelf-piece-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-shelf-piece-candidate { font-size: var(--font-xs); color: var(--color-text-secondary); background: var(--color-bg-sunken); border-radius: var(--radius-sm); padding: 2px 6px; } .rt-shelf-piece-days { font-size: var(--font-xs); color: var(--color-text-tertiary); flex: none; }   .rt-shelf-piece-actions { display: flex; gap: 6px; padding: 0 14px 10px; } .rt-shelf-empty { padding: 14px; color: var(--color-text-secondary); font-size: var(--font-sm); } .rt-shelf-switch { display: flex; justify-content: flex-end; margin-bottom: 8px; } .rt-filter-card { margin-bottom: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--color-bg-sunken); } .rt-filter-row1, .rt-filter-row2 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .rt-filter-row2 { margin-top: 8px; } .rt-date-toggle, .rt-date-range { display: inline-flex; align-items: center; gap: 4px; } .rt-date-toggle { padding: 4px 8px; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .rt-date-toggle:hover { background: var(--color-bg-base); } .rt-date-value { font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-caret { color: var(--color-text-tertiary); } .rt-date-sep { font-size: var(--font-xs); color: var(--color-text-tertiary); } .rt-search { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 280px; min-width: 280px; height: 32px; padding: 0 6px; border: 1px solid var(--color-border-muted); border-radius: 6px; background: var(--color-bg-base); } .rt-search-icon { color: var(--color-text-tertiary); font-size: var(--font-xs); } .rt-search-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: var(--font-sm); } .rt-search-clear, .rt-search-help { width: 18px; height: 18px; flex: 0 0 auto; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .rt-search-help { cursor: help; display: inline-flex; align-items: center; justify-content: center; } .rt-preset-btn {   display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 12px; border: 1px solid var(--color-feature-tracking); border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-feature-tracking); } .rt-preset-btn:hover { background: var(--color-bg-sunken); }   html.dark .rt-preset-btn { color: var(--color-text-secondary); } .rt-primary-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 16px; border: 0; border-radius: 8px; cursor: pointer; background: var(--color-feature-tracking); color: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .rt-primary-btn:hover { opacity: .88; } .rt-genre-label { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-count-badge { padding: 2px 8px; border-radius: 8px; background: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .rt-count-unit { font-size: var(--font-2xs); font-weight: var(--weight-normal); color: var(--color-text-secondary); } .rt-filter-actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; } .rt-menu-anchor { position: relative; } .rt-filter-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-filter-btn:hover { border-color: var(--color-text-secondary); } .rt-filter-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-feature-tracking); color: var(--color-bg-base); font-size: var(--font-2xs); font-weight: var(--weight-bold); } .rt-sort-select { height: 32px; min-width: 150px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); font-size: var(--font-xs); } .rt-filter-popup { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown); min-width: 520px; padding: 12px 14px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: var(--shadow-md); } .rt-filter-popup-title { margin-bottom: 10px; font-size: var(--font-sm); font-weight: var(--weight-semibold); } .rt-filter-line { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .rt-filter-key { width: 88px; flex: 0 0 auto; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .rt-filter-select { flex: 1 1 auto; height: 32px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); font-size: var(--font-xs); } .rt-genre-chip, .rt-scope-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-genre-chip.active { background: var(--color-bg-elevated); border-color: var(--color-text-secondary); } .rt-genre-chip.send.active { background: var(--color-feature-tracking-surface); border-color: var(--color-feature-tracking); } .rt-genre-chip.recv.active { background: var(--color-info-surface); border-color: var(--color-info); } .rt-chip-count { padding: 1px 5px; border-radius: 8px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .rt-scope-chip { border: 0; border-radius: 10px; font-weight: var(--weight-normal); color: var(--color-text-tertiary); } .rt-scope-chip.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .rt-filter-divider { border: 0; border-top: 1px solid var(--color-border-default); margin: 4px 0 8px; } .rt-filter-check { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--font-xs); } .rt-active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .rt-active-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 6px; background: var(--color-primary-surface); border: 1px solid var(--color-primary); } .rt-chip-label { font-size: var(--font-2xs); color: var(--color-text-secondary); } .rt-chip-value { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-chip-clear { width: 14px; height: 14px; margin-left: 4px; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; }   .rt-skeleton { pointer-events: none; } .rt-skel-item { display: flex; flex-direction: column; gap: 8px; } .rt-skel-line { height: 12px; border-radius: 4px; background: var(--color-bg-sunken); } .rt-skel-w1 { width: 62%; height: 14px; } .rt-skel-w2 { width: 44%; } .rt-skel-w3 { width: 78%; }   .rt-detail-back { display: none; } .rt-track-list { list-style: none; margin: 0; padding: 0; } .rt-track-list > li { position: relative; } .rt-context-menu { position: absolute; left: 12px; top: 60%; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: 180px; padding: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .rt-context-menu > button { text-align: left; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-primary); } .rt-context-menu > button:hover { background: var(--color-bg-sunken); } .rt-loading-more, .rt-detail-loading { padding: 8px; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-detail-loading { font-size: var(--font-sm); padding: 80px 0 0; }   .rt-count-line { display: flex; justify-content: center; gap: 4px; margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .tracking-progress.is-vertical { flex-direction: column; align-items: stretch; } .tracking-progress.is-vertical .step { flex: 0 0 auto; flex-direction: row; align-items: center; min-height: 46px; } .tracking-progress.is-vertical .step-spine { position: relative; flex: 0 0 34px; align-self: stretch; display: flex; align-items: center; justify-content: center; } .tracking-progress.is-vertical .step-spine-up, .tracking-progress.is-vertical .step-spine-down { position: absolute; left: 50%; width: 3px; margin-left: -1.5px;   background: var(--color-success); }   .tracking-progress.is-vertical .step-spine-up { top: 0; bottom: calc(50% + 10px); } .tracking-progress.is-vertical .step-spine-down { top: calc(50% + 10px); bottom: 0; background: var(--color-border-default); } .tracking-progress.is-vertical .step-pending .step-spine-up { background: var(--color-border-default); } .tracking-progress.is-vertical .step-completed .step-spine-down { background: var(--color-success); } .tracking-progress.is-vertical .step-spine-up.is-hidden, .tracking-progress.is-vertical .step-spine-down.is-hidden { display: none; } .tracking-progress.is-vertical .step-label { flex: 1 1 auto; min-width: 0; margin: 4px 8px 4px 12px; font-size: var(--font-sm); } .tracking-progress.is-vertical .step-person { flex-direction: row; gap: 7px; margin: 4px 0 4px 8px; } .tracking-progress.is-vertical .step-person-name { max-width: 120px; font-size: 11px; } .tracking-progress.is-vertical .step-person-stack { margin: 4px 0 4px 16px; } .rt-icon-btn { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--color-text-secondary); } .rt-icon-btn:hover { background: var(--color-bg-sunken); } .rt-link-btn { height: 34px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-tertiary); } .rt-link-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .rt-tracking-card { margin: 0 0 10px; padding: 12px 10px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: var(--color-bg-elevated); } .rt-tracking-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .rt-tracking-title { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); }       .rt-completed-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; margin-right: 6px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--color-success); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); } .rt-completed-badge .icon-9 { width: 9px; height: 9px; } .rt-new-badge { margin-left: 6px; padding: 1px 4px; border-radius: 6px; background: var(--color-error); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); } .rt-elapsed-days { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .rt-proof-state { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; margin-left: 6px; padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: var(--weight-bold); }   .rt-proof-state.is-pending { background: var(--color-info-surface); color: var(--color-info); }   .rt-proof-state.is-confirmed { background: var(--color-success); color: var(--color-text-on-primary); }   .rt-proof-state.is-canceled { background: var(--color-bg-sunken); color: var(--color-text-disabled); } .rt-proof-cancel { margin-left: 4px; flex: 0 0 auto; white-space: nowrap; }   .rt-proof-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rt-proof-filter { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .rt-proof-filter:hover { background: var(--color-bg-sunken); } .rt-proof-filter.is-on { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-on-primary); font-weight: var(--weight-bold); } .rt-proof-filter-count { font-size: var(--font-2xs); opacity: 0.8; } .tni-hint { position: relative; display: inline-flex; align-items: center; } .tni-hint-toggle { width: 16px; height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .tni-hint-toggle svg { width: 12px; height: 12px; } .tni-hint-toggle:hover { background: var(--color-primary-surface-light); } .tni-hint-toggle.is-open { background: var(--color-primary-surface); } .tni-hint-popup { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); max-width: 360px; padding: 12px 16px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: var(--shadow-lg); } .tni-hint-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 6px; } .tni-hint-lead { font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: 12px; } .tni-hint-subtitle { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); margin-bottom: 6px; } .tni-hint-table { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; } .tni-hint-carrier { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-primary); } .tni-hint-term { font-size: var(--font-xs); color: var(--color-text-secondary); } .rt-optional-chip { padding: 1px 6px; border: 1px solid var(--color-border-muted); border-radius: 10px; background: var(--color-bg-sunken); font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .rt-carrier-select { margin-left: auto; min-width: 130px; height: 32px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); font-size: var(--font-xs); } .rt-carrier-name { margin-left: auto; font-size: var(--font-xs); color: var(--color-text-secondary); } .rt-setnone-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: var(--color-bg-base); cursor: pointer; } .rt-setnone-row:hover { background: var(--color-bg-sunken); border-color: var(--color-feature-tracking); } .rt-setnone-left { font-size: var(--font-xs); color: var(--color-text-tertiary); } .rt-setnone-right { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-feature-tracking); } .rt-tracking-edit, .rt-tracking-set { display: flex; align-items: center; gap: 6px; } .rt-tracking-input { flex: 1 1 auto; min-width: 140px; height: 34px; padding: 4px 8px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); background: var(--color-bg-base); font-size: var(--font-xs); } .rt-save-btn { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--color-primary); color: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; } .rt-tracking-number { font-family: Consolas, "Cascadia Code", monospace; font-size: var(--font-sm); color: var(--color-text-primary); } .rt-track-cta { margin-left: auto; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px; text-decoration: none;   background: var(--color-track-cta); color: var(--color-bg-base); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .rt-tracking-guide { margin: 9px 2px 0; font-size: var(--font-2xs); color: var(--color-text-secondary); } .rt-history { margin-bottom: 10px; } .rt-history-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .rt-history-count { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size: var(--font-2xs); } .rt-fromto-key { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-person-chip { padding: 1px 4px; border: 0; border-radius: 4px; background: var(--color-bg-sunken); cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-secondary); } .rt-person-chip:hover { background: var(--color-primary-surface); } .event-fromto { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .rt-detail-pills { margin: 4px 0 10px; } .rt-detail-pills-title { margin: 0 0 6px 2px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .rt-pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .rt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--color-border-muted); border-radius: 12px; background: var(--color-bg-sunken); } .rt-pill-btn { cursor: pointer; } .rt-pill-btn:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); }   .rt-pill-btn:active { background: var(--color-primary-surface); }   .rt-pill-key, .rt-pill-icon { flex-shrink: 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-pill-value { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-primary); }   .rt-pill-unset { color: var(--color-text-tertiary); font-style: italic; }   .rt-genre-pill { padding: 0 6px; border-radius: 8px; color: var(--color-text-secondary); flex: none; } .rt-genre-pill-send { background: color-mix(in srgb, var(--color-feature-tracking) 19%, transparent); } .rt-genre-pill-recv { background: color-mix(in srgb, var(--color-mail-receive) 19%, transparent); } .rt-genre-pill-fallback { background: color-mix(in srgb, var(--color-warning) 19%, transparent); } .rt-genre-pill-error { background: color-mix(in srgb, var(--color-error) 19%, transparent); } .rt-genre-pill-default { background: color-mix(in srgb, var(--color-feature-tracking) 19%, transparent); }   .tracking-item-row2 > span { flex: none; white-space: nowrap; align-self: center; } .tracking-item-row2 > .rt-card-project { flex: 0 1 auto; min-width: 0; }   .tracking-item-row4 { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .rt-row-action { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; } .rt-row-action:hover { background: var(--color-bg-sunken); } .rt-row-action.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); } .rt-row-action.primary:hover { background: var(--color-primary-dark); } .rt-card-tracking-number { color: var(--color-text-tertiary); } .rt-card-carrier { padding: 0 5px; border: 1px solid var(--color-feature-tracking); border-radius: 6px; background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking-dark); font-size: var(--font-2xs); font-weight: 500; } .rt-card-project { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 2px; padding: 0 6px; border-radius: 8px; background: var(--color-primary-surface-light); color: var(--color-text-secondary); }   .rt-list-end { height: 1px; }   .rt-menu-dismiss { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); background: transparent; }   .tracking-progress .step-label.is-clickable { cursor: pointer; } .tracking-progress .step-label.is-clickable:hover { text-decoration: underline; }   .tracking-event.is-highlighted { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }   .rt-fallback-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--color-border-muted); border-radius: 12px; background: var(--color-bg-sunken); font-size: var(--font-xs); } .rt-fallback-label { color: var(--color-text-tertiary); } .rt-fallback-name { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }   .rt-fallback-change { border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--color-primary-on-surface); text-decoration: underline; font-size: var(--font-xs); }   .rt-escalation { display: flex; align-items: center; gap: 2px; margin: 0 2px 10px; } .rt-escalation-icon { flex: 0 0 auto; margin-right: 3px; color: var(--color-text-tertiary); } .rt-escalation-key { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-escalation-value { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-escalation-value.off { color: var(--color-text-secondary); }   .rt-escalation-link { margin-left: auto; padding: 2px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-escalation-link:hover { text-decoration: underline; color: var(--color-primary-on-surface); }   .rt-card { display: flex; align-items: flex-start; gap: 12px; } .rt-card-body { flex: 1 1 auto; min-width: 0; } .rt-thumb { position: relative; flex: 0 0 80px; width: 80px; height: 100px; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-sunken); }   .rt-thumb-render { position: absolute; left: 0; top: 0; width: 180px; height: 100%; } .rt-thumb-canvas { display: block; width: 80px; height: 100px; object-fit: cover; } .rt-thumb-canvas.is-done { background: var(--color-label-paper); } .rt-thumb-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }   .rt-thumb-fallback-text { font-size: 11px; color: var(--color-text-disabled); } .rt-thumb-fallback.is-failed .rt-thumb-fallback-text { color: var(--color-warning-dark); } .rt-thumb-fallback-icon { width: 22px; height: 22px; color: var(--color-warning); } .rt-pdf-area { display: flex; justify-content: center; padding: 12px 10px; border-top: 1px solid var(--color-border-muted); background: var(--color-bg-elevated); } .rt-pdf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 28px; border: 0; border-radius: 8px; background: var(--color-text-primary); color: var(--color-bg-base); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; }   .rt-pdf-btn:hover { background: var(--color-text-primary-hover); } .rt-pdf-btn:active { background: var(--color-text-primary-pressed); } .rt-pdf-overlay { position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; background: var(--color-bg-base); border-radius: 8px; } .rt-pdf-toolbar { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 8px; } .rt-pdf-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--color-bg-sunken); }   .rt-bulk-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .rt-bulk-toggle:hover { border-color: var(--color-text-secondary); } .rt-bulk-toggle.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); } .rt-bulk-toggle-icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--color-text-secondary); }   .rt-track-list.is-bulk .tracking-item { padding-left: 46px; } .rt-row-check { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); } .rt-row-check.is-on { background: var(--color-feature-tracking); border-color: var(--color-feature-tracking); } .rt-row-check svg { width: 14px; height: 14px; color: var(--color-text-on-primary); } .tracking-item.bulk-selected { background: var(--color-feature-tracking-surface); }   .rt-bulk-status { position: sticky; bottom: 4px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 4px; padding: 10px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-feature-tracking); } .rt-bulk-status-text { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .rt-ghost-btn { height: 32px; padding: 0 12px; border: 1px solid var(--color-border-muted); border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .rt-ghost-btn:hover { background: var(--color-bg-sunken); } .rt-ghost-btn:disabled { opacity: .45; cursor: default; }   .rt-bulk-form { padding: 14px 16px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-feature-tracking); } .rt-bulk-form-title { margin-bottom: 4px; font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); } .rt-bulk-form-lead { margin: 12px 0 8px; font-size: var(--font-2xs); color: var(--color-text-disabled); } .rt-bulk-field { margin-bottom: 8px; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-muted); } .rt-bulk-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; flex-wrap: wrap; } .rt-bulk-field-label { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .rt-bulk-apply { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .rt-bulk-hint { margin-bottom: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-bulk-select { width: 100%; height: 30px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); font-size: var(--font-xs); } .rt-bulk-note { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .rt-bulk-tri { position: relative; } .rt-bulk-tri.is-mixed::before { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; height: 2px; transform: translateY(-50%); background: var(--color-text-tertiary); pointer-events: none; } .rt-bulk-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }   .rt-proxy-card { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-muted); } .rt-proxy-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: 2px 0; border: 0; background: transparent; cursor: pointer; } .rt-proxy-toggle-label { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .rt-proxy-chev { width: 11px; height: 11px; color: var(--color-text-tertiary); transition: transform var(--duration-fast) var(--ease-default); } .rt-proxy-chev.is-open { transform: rotate(180deg); } .rt-proxy-chev svg { width: 11px; height: 11px; } .rt-proxy-toggle:hover .rt-proxy-chev { color: var(--color-primary-on-surface); } .rt-proxy-body { margin-top: 8px; } .rt-proxy-note { margin: 4px 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .rt-proxy-row { display: flex; align-items: center; gap: 6px; }   .rt-proxy-lead { margin: 0 0 8px; font-size: var(--font-xs); color: var(--color-text-secondary); } .rt-proxy-ack { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 8px 12px; border: 0; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); cursor: pointer; font-size: var(--font-xs); font-weight: var(--weight-semibold); text-align: left; } .rt-proxy-ack:disabled { opacity: .5; cursor: default; } .rt-proxy-ack-icon { width: 14px; height: 14px; flex: 0 0 auto; } .rt-assignee-select { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); font-size: var(--font-xs); } @media (max-width: 900px) {   .rt-filter-popup { min-width: 0; width: min(520px, calc(100vw - 32px)); right: auto; left: 0; } } .cabinet-status-overlay { position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; background: var(--color-bg-base); opacity: .92; font-size: var(--font-sm); color: var(--color-text-secondary); }   .todo-sort-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; padding: 0 24px 8px; } .todo-sort-chip { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-sort-chip.active { background: var(--color-feature-task); border-color: var(--color-feature-task); color: var(--color-bg-base); font-weight: var(--weight-semibold); } .todo-search-clear { width: 18px; height: 18px; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-title-search { height: 28px; min-width: 160px; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); font-size: var(--font-xs); } .todo-list { list-style: none; margin: 0; padding: 0; } .todo-overdue-badge { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-error-surface); color: var(--color-error); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .todo-meta-key { color: var(--color-text-tertiary); margin-right: 2px; } .todo-creator { display: inline-flex; align-items: center; gap: 2px; } .todo-remark-list { list-style: none; margin: 0; padding: 0; } .todo-remarks-head { display: flex; align-items: center; justify-content: space-between; } .btn-icon-sm { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--color-feature-task); } .btn-icon-sm:hover { background: var(--color-bg-sunken); }   .todo-config { max-width: 720px; } .todo-config-titlebar { display: flex; align-items: center; gap: 12px; padding: 20px 16px 0 24px; } .todo-config-title-wrap { flex: 1 1 auto; min-width: 0; } .todo-config-title { width: 100%; border: 0; background: transparent; font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .todo-config-title:hover, .todo-config-title:focus { background: var(--color-bg-sunken); }   .todo-unsaved { padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; background: var(--color-warning-surface); border: 1px solid var(--color-warning); font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-warning-on-surface); } .todo-config-stars { display: inline-flex; gap: 2px; } .todo-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 4px 22px; } .todo-meta-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-sunken); font-size: var(--font-sm); } .todo-meta-chip select { border: 0; background: transparent; font-size: var(--font-sm); } .todo-mention-list { list-style: none; display: inline-flex; gap: 4px; margin: 0; padding: 0; } .todo-mention { padding: 1px 6px; border-radius: 10px; background: var(--color-bg-base); font-size: var(--font-xs); } .todo-mention-input { width: 90px; border: 0; background: transparent; font-size: var(--font-sm); } .todo-creator-meta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-deadline-group { margin: 8px 24px 0; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); } .todo-deadline-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 14px; border: 0; border-radius: 9px; background: var(--color-bg-sunken); cursor: pointer; text-align: left; } .todo-deadline-caret { font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-deadline-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .todo-deadline-summary { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-tertiary); } .todo-deadline-body { padding: 10px 14px 12px; } .todo-dl-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .todo-dl-label { width: 88px; flex: 0 0 auto; margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-dl-set { border: 0; background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-tertiary); } .todo-seg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .todo-seg-chip { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-seg-chip.active { background: var(--color-feature-task); border-color: var(--color-feature-task); color: var(--color-bg-base); font-weight: var(--weight-semibold); } .todo-seg-num { width: 44px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-sm); } .todo-seg-unit { font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-config-body { padding: 12px 24px 0; } .todo-body-input { width: 100%; padding: 14px 12px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-sunken); font-size: var(--font-base); } .todo-config-footer { display: flex; align-items: center; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--color-border-default); } .todo-esc-hint { flex: 1 1 auto; font-size: var(--font-xs); color: var(--color-text-tertiary); } .btn-danger-outline { padding: 5px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-error); } .btn-danger-outline:hover { background: var(--color-error-surface); border-color: var(--color-error); }   .todo-prio-hint { padding: 0 24px 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .todo-prio-open { border-style: dashed; } .todo-prio-board { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--color-bg-elevated); border-left: 1px solid var(--color-border-default); } .todo-prio-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-default); } .todo-prio-head h3 { margin: 0; font-size: var(--font-md); font-weight: var(--weight-semibold); } .todo-prio-people { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 2px; } .todo-prio-person { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: transparent; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-prio-person.active { background: var(--color-feature-task); border-color: var(--color-feature-task); color: var(--color-bg-base); font-weight: var(--weight-semibold); } .todo-prio-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 0; } .todo-prio-empty { margin-top: 32px; text-align: center; font-size: var(--font-sm); color: var(--color-text-tertiary); } .todo-prio-headnote { margin: 0 0 2px 4px; font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-feature-task-dark); } .todo-prio-footnote { margin: 2px 0 0 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .todo-prio-slot { padding: 6px 8px; border: 1px dashed var(--color-border-default); border-radius: 8px; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-prio-slot.large { padding: 18px 8px; font-size: var(--font-sm); } .todo-prio-slot.idle { visibility: hidden; height: 4px; padding: 0; border-color: transparent; } .todo-prio-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .todo-prio-rank { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--color-feature-task); border-radius: var(--radius-full); background: var(--color-bg-elevated); font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-feature-task-dark); } .todo-prio-rank.top { width: 32px; height: 32px; background: var(--color-feature-task); color: var(--color-bg-base); } .todo-prio-cards { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; } .todo-prio-card { display: flex; align-items: stretch; gap: 10px; flex: 1 1 100%; padding: 9px 8px 9px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); cursor: pointer; } .todo-prio-card:hover { border-color: var(--color-feature-task); background: var(--color-feature-task-surface); } .todo-prio-card-main { flex: 1 1 auto; min-width: 0; } .todo-prio-card-title { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-prio-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .todo-pb-badge { padding: 2px 6px; border-radius: 4px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .todo-pb-badge.prog-1 { background: var(--color-info-surface); color: var(--color-feature-message); } .todo-pb-badge.prog-3 { background: var(--color-warning-surface); color: var(--color-warning-dark); } .todo-pb-badge.flag-1 { background: var(--color-warning-surface); color: var(--color-warning-dark); } .todo-pb-badge.flag-2 { background: var(--color-error-surface); color: var(--color-error-on-surface); } .todo-pb-badge.deadline.overdue { background: var(--color-error-surface); color: var(--color-error-on-surface); font-weight: var(--weight-bold); } .todo-prio-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-prio-grip { flex: 0 0 auto; align-self: center; font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-secondary); cursor: grab; } .todo-prio-unset { margin-top: 16px; padding: 10px 12px 6px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-sunken); } .todo-prio-unset-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .todo-prio-unset-title { font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .todo-prio-unset-count { padding: 0 7px; border-radius: 9px; background: var(--color-border-default); font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .todo-prio-unset-hint { margin-left: auto; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-prio-unset .todo-prio-card { margin-bottom: 6px; } .todo-prio-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 12px; } .todo-prio-foot-hint { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-prio-saved { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-feature-task-dark); }   .todo-list-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }   .todo-list-col > .todo-list, .todo-list-col > .todo-prestart-head { flex: 0 0 auto; } .todo-list-col > .todo-list:not(.todo-prestart-list) { overflow: visible; } .todo-card-rank { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 8px 0 0 8px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .todo-card-rank.top { background: var(--color-feature-task); border-color: var(--color-feature-task); color: var(--color-bg-base); } .todo-card-rank + .todo-prio-bar { margin-left: 8px; } .todo-card-info > .todo-card-recur { margin-left: 8px; color: var(--color-feature-task-dark); } .todo-prestart-head { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 8px 16px; border: none; border-top: 1px solid var(--color-border-default); background: var(--color-bg-sunken); cursor: pointer; text-align: left; font-size: var(--font-xs); } .todo-prestart-caret { color: var(--color-text-secondary); } .todo-prestart-title { font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .todo-prestart-count { color: var(--color-text-tertiary); } .todo-prestart-list { max-height: 280px; overflow-y: auto; }   .todo-sort-more { position: relative; display: inline-flex; align-items: flex-start; gap: 4px; } .todo-sort-more > summary { list-style: none; display: inline-flex; align-items: center; } .todo-sort-more > summary::-webkit-details-marker { display: none; }   .todo-sort-more-items { display: flex; flex-wrap: nowrap; gap: 4px; } .todo-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 0 24px 16px; align-items: start; } .todo-embedded .todo-columns { padding: 0 8px 12px; } .todo-column { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); overflow: hidden; } .todo-column-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--color-border-default); } .todo-column-title { font-weight: var(--weight-bold); color: var(--color-text-primary); } .todo-column-count { font-size: var(--font-xs); color: var(--color-text-secondary); } .todo-column-sort { margin-left: auto; font-size: var(--font-xs); color: var(--color-text-tertiary); } .todo-column-group { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-secondary); font-weight: var(--weight-semibold); } .todo-column-group.is-overdue .todo-column-group-label { color: var(--color-error-on-surface); } .todo-column-group-count { color: var(--color-text-tertiary); font-weight: normal; } .todo-column-empty { padding: 16px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .todo-column > .todo-list { overflow: visible; } .todo-column-done { margin-top: 0; }   .todo-embedded { display: flex; flex-direction: column; min-height: 100%; background: var(--color-bg-base); } .todo-embed-row { padding: 4px 16px; } .todo-embed-row-cta { padding-top: 12px; } .todo-embed-row-filter { display: flex; flex-wrap: wrap; gap: 0; padding-top: 8px; } .todo-embed-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer; background: var(--color-feature-task); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); } .todo-embed-cta:hover { background: var(--color-feature-task-dark); } .todo-embed-cta svg { width: 14px; height: 14px; } .todo-embed-cta-empty { width: auto; margin-top: 16px; padding: 10px 20px; } .todo-embed-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--color-bg-sunken); } .todo-embed-search > svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-text-tertiary); } .todo-embed-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--font-sm); color: var(--color-text-primary); } .todo-embed-sorts { display: flex; flex-wrap: wrap; align-items: flex-start; } .todo-embed-sorts .todo-sort-chip { display: inline-flex; align-items: center; margin: 0 4px 4px 0; padding: 3px 8px; border-radius: 12px; } .todo-embed-sorts .todo-sort-chip:hover { background: var(--color-bg-sunken); } .todo-embed-sorts .todo-sort-chip.active { background: var(--color-feature-task-surface); border-color: var(--color-feature-task); color: var(--color-feature-task); font-weight: var(--weight-semibold); } .todo-embed-sorts .todo-prio-open { margin-left: 4px; padding: 3px 10px; border-style: solid; background: var(--color-feature-task-surface); border-color: var(--color-feature-task); color: var(--color-feature-task-dark); font-weight: var(--weight-semibold); } .todo-embed-sorts .todo-prio-open:hover { background: var(--color-feature-task); } .todo-sort-arrow { width: 10px; height: 10px; margin-left: 3px; color: var(--color-text-tertiary); } .todo-sort-arrow.is-desc { transform: rotate(180deg); } .todo-embed-hint { margin: 0 0 2px 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .todo-embed-row-filter .todo-chip { margin: 0 6px 6px 0; padding: 5px 10px; border-radius: 14px; font-weight: var(--weight-normal); } .todo-embed-row-filter .todo-chip.active { background: var(--color-feature-task); border-color: var(--color-feature-task); color: var(--color-text-on-primary); font-weight: var(--weight-semibold); } .todo-embed-row-filter .todo-chip-warning { border-color: var(--color-error); color: var(--color-error-on-surface); }   .todo-embed-row-filter .todo-chip-warning.active { background: var(--color-error-dark); border-color: var(--color-error-dark); color: var(--color-text-on-primary); } .todo-embed-divider { height: 1px; margin: 0 16px; background: var(--color-border-default); } .todo-embedded .todo-layout { flex: 1; min-height: 0; padding: 8px 16px; } .todo-embedded .todo-empty { flex: 1; }   .todo-more-search { display: grid; grid-template-columns: 56px 1fr; gap: 6px 0; align-items: center; margin: 0 24px 8px; padding: 12px 16px; border-radius: 8px; background: var(--color-bg-sunken); } .todo-more-search-label { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .todo-cond-list { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 0; padding: 0; list-style: none; } .todo-cond { height: 25px; padding: 0 10px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); color: var(--color-text-tertiary); font-size: var(--font-xs); cursor: pointer; } .todo-cond.on { border-color: var(--color-feature-task); background: var(--color-feature-task-surface); color: var(--color-feature-task-dark); font-weight: var(--weight-semibold); }   .sp-pdf-editor { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 520px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-sunken); overflow: hidden; }   .pdf-landing.is-cabinet-tab { min-height: 0; height: 100%; } .pdf-landing.is-cabinet-tab .sp-pdf-editor { min-height: 0; border: none; border-radius: 0; }   .pdf-landing.is-cabinet-tab .sp-pdf-bar-right .sp-pdf-textbtn:not(.sp-pdf-save) > span { display: none; } .sp-pdf-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 4px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); } .sp-pdf-bar-left { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; } .sp-pdf-bar-center { display: flex; align-items: center; flex: 0 0 auto; gap: 2px; } .sp-pdf-bar-right { display: flex; align-items: center; flex: 1 1 auto; gap: 2px; justify-content: flex-end; } .sp-pdf-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .sp-pdf-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--color-border-default); } .sp-pdf-iconbtn, .sp-pdf-textbtn { display: inline-flex; align-items: center; flex: none; white-space: nowrap; gap: 6px; border: none; border-radius: 6px; background: none; color: var(--color-text-primary); font-size: var(--font-sm); cursor: pointer; } .sp-pdf-iconbtn { padding: 6px 7px; } .sp-pdf-textbtn { padding: 5px 9px; } .sp-pdf-iconbtn:hover, .sp-pdf-textbtn:hover { background: var(--color-primary-surface); } .sp-pdf-save { color: var(--color-primary-on-surface); font-weight: 600; } .sp-pdf-pagelabel, .sp-pdf-zoomlabel { flex: none; white-space: nowrap; min-width: 52px; text-align: center; font-size: var(--font-sm); color: var(--color-text-secondary); } .sp-pdf-menuwrap { position: relative; } .sp-pdf-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 200px; padding: 4px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: var(--shadow-md); } .sp-pdf-menu-wide { min-width: 240px; } .sp-pdf-menurow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: none; border-radius: 6px; background: none; color: var(--color-text-primary); font-size: var(--font-sm); text-align: left; cursor: pointer; } .sp-pdf-menurow:hover { background: var(--color-primary-surface); } .sp-pdf-menusep { height: 1px; margin: 4px 8px; background: var(--color-border-default); } .sp-pdf-history { width: 360px; max-height: 460px; overflow-y: auto; } .sp-pdf-history-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; } .sp-pdf-history-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .sp-pdf-history-clear { padding: 2px 6px; border: none; border-radius: 6px; background: none; font-size: var(--font-2xs); color: var(--color-text-secondary); cursor: pointer; } .sp-pdf-history-clear:hover { background: var(--color-bg-sunken); } .sp-pdf-history-row { display: flex; align-items: center; } .sp-pdf-history-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: none; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer; } .sp-pdf-history-main:hover { background: var(--color-bg-sunken); } .sp-pdf-history-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sp-pdf-history-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-pdf-history-sub { font-size: var(--font-2xs); color: var(--color-text-secondary); } .sp-pdf-history-time { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sp-pdf-history-del { width: 28px; height: 28px; border: none; border-radius: 6px; background: none; color: var(--color-text-tertiary); cursor: pointer; } .sp-pdf-history-del:hover { background: var(--color-bg-sunken); } .sp-pdf-history-empty { margin: 28px 16px; text-align: center; font-size: var(--font-sm); color: var(--color-text-tertiary); } .sp-pdf-findbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); } .sp-pdf-findinput { width: 220px; padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); } .sp-pdf-findinput:focus { border-color: var(--color-primary); outline: none; } .sp-pdf-findcount { font-size: var(--font-xs); color: var(--color-text-secondary); min-width: 48px; text-align: center; } .sp-pdf-body { position: relative; flex: 1; display: flex; min-height: 0; } .sp-pdf-thumbs { width: 148px; flex: none; padding: 6px; overflow-y: auto; border-right: 1px solid var(--color-border-default); background: var(--color-bg-sunken); } .sp-pdf-thumb { display: block; width: 100%; margin: 0 0 6px; padding: 2px; border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); cursor: pointer; position: relative; } .sp-pdf-thumb.is-current { border-color: var(--color-primary); border-width: 2px; } .sp-pdf-thumb img { display: block; width: 100%; } .sp-pdf-thumb-no { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: var(--color-overlay-black-70); color: #fff; font-size: var(--font-2xs); } .sp-pdf-pages { flex: 1; min-width: 0; overflow: auto; padding: 12px; text-align: center; } .sp-pdf-page { position: relative; display: inline-block; margin: 0 auto 12px; background: var(--color-bg-base); box-shadow: var(--shadow-sm); } .sp-pdf-page-canvas { display: block; } .sp-pdf-page-overlay { position: absolute; inset: 0; } .sp-pdf-annot-layer { position: absolute; inset: 0; pointer-events: none; } .sp-pdf-picking { cursor: crosshair; } .sp-pdf-picking .sp-pdf-page { cursor: crosshair; } .sp-pdf-pan { cursor: grab; } .sp-pdf-pan .sp-pdf-page { cursor: grab; } .sp-pdf-pan:active, .sp-pdf-pan:active .sp-pdf-page { cursor: grabbing; } .sp-pdf-drag-box { position: absolute; pointer-events: none; } .sp-pdf-drag-redact { background: var(--color-overlay-black-70); border: 1px solid var(--color-text-primary); } .sp-pdf-drag-crop { border: 2px solid var(--color-primary); background: var(--color-primary-surface); opacity: 0.6; } .sp-pdf-drag-sign { border: 2px dashed var(--color-info); background: var(--color-info-surface); opacity: 0.6; } .sp-pdf-find-mark { position: absolute; background: var(--color-warning-surface); opacity: 0.6; pointer-events: none; } .sp-pdf-prev-box { position: absolute; box-sizing: border-box; background: var(--color-error-surface); border: 2px solid var(--color-error); opacity: 0.85; cursor: move; } .sp-pdf-prev-del { position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; line-height: 15px; text-align: center; border-radius: 50%; background: var(--color-bg-base); color: var(--color-error); border: 1px solid var(--color-error); font-size: var(--font-2xs); cursor: pointer; } .sp-pdf-prev-resize { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid var(--color-error); border-radius: 3px; background: var(--color-bg-base); cursor: nwse-resize; } .sp-pdf-loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--color-bg-base); font-size: var(--font-sm); color: var(--color-text-secondary); } .sp-pdf-modebar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); box-shadow: var(--shadow-md); } .sp-pdf-modetext { font-size: var(--font-sm); color: var(--color-text-secondary); margin-right: 4px; } .sp-pdf-modeok { padding: 6px 12px; border: none; border-radius: 6px; background: var(--color-primary); color: #fff; font-size: var(--font-sm); cursor: pointer; } .sp-pdf-modeok.sp-pdf-danger { background: var(--color-error); } .sp-pdf-modeok.sp-pdf-blue { background: var(--color-info); } .sp-pdf-modecancel { padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .sp-pdf-overlay { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--color-bg-sunken); } .sp-pdf-overlay-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); } .sp-pdf-overlay-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .sp-pdf-overlay-name { flex: none; white-space: nowrap; font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .sp-pdf-overlay-hint { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-xs); color: var(--color-text-tertiary); } .sp-pdf-overlay-size { display: flex; align-items: center; flex: none; gap: 8px; margin-left: auto; } .sp-pdf-overlay-sizelabel { flex: none; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-tertiary); } .sp-pdf-overlay-actions { display: flex; align-items: center; flex: none; gap: 4px; margin-left: auto; } .sp-pdf-overlay-body { flex: 1; overflow: auto; padding: 16px; position: relative; } .sp-pdf-overlay-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--font-sm); color: var(--color-text-secondary); } .sp-pdf-cards { display: flex; flex-wrap: wrap; gap: 12px; } .sp-pdf-card { position: relative; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); padding: 8px 8px 4px; } .sp-pdf-card.is-open { border-color: var(--color-primary); } .sp-pdf-card img { display: block; width: 100%; } .sp-pdf-card-no { display: block; text-align: center; font-size: var(--font-xs); color: var(--color-text-secondary); } .sp-pdf-card-hover { position: absolute; right: 9px; top: 7px; display: none; gap: 3px; } .sp-pdf-card:hover .sp-pdf-card-hover { display: flex; } .sp-pdf-card-btn { width: 28px; height: 28px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-base); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sp-pdf-card-btn:hover { background: var(--color-primary-surface); } .sp-pdf-danger-icon { color: var(--color-error); } .sp-pdf-ctx { position: absolute; left: 12px; top: 12px; z-index: 10; min-width: 190px; padding: 4px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: var(--shadow-md); display: flex; flex-direction: column; } .sp-pdf-ctx-row { padding: 7px 10px; border-radius: 6px; font-size: var(--font-sm); color: var(--color-text-primary); cursor: pointer; } .sp-pdf-ctx-row:hover { background: var(--color-primary-surface); } .sp-pdf-ctx-danger { color: var(--color-error); } .sp-pdf-bookmarks { display: flex; flex-direction: column; gap: 8px; } .sp-pdf-bookmark { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .sp-pdf-bookmark-title { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--color-border-default); border-radius: 6px; font-size: var(--font-sm); } .sp-pdf-bookmark-page { display: flex; align-items: center; gap: 6px; } .sp-pdf-bookmark-pagelabel { font-size: var(--font-xs); color: var(--color-text-secondary); } .sp-pdf-bookmark-pageinput { width: 52px; padding: 4px 6px; text-align: center; border: 1px solid var(--color-border-default); border-radius: 6px; font-size: var(--font-sm); } .sp-pdf-bookmark-empty { margin: 8px 0 0 4px; font-size: var(--font-sm); color: var(--color-text-tertiary); } .sp-pdf-dialog-back { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--color-overlay-black-70); } .sp-pdf-dialog { width: 460px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; padding: 24px; border-radius: 12px; background: var(--color-bg-base); box-shadow: var(--shadow-md); } .sp-pdf-dialog-title { margin: 0 0 4px; font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .sp-pdf-dialog-lead { margin: 0 0 16px; font-size: var(--font-sm); color: var(--color-text-secondary); } .sp-pdf-dialog-label { display: block; margin: 0 0 4px; font-size: var(--font-sm); color: var(--color-text-secondary); } .sp-pdf-dialog-input { width: 100%; margin: 0 0 12px; padding: 8px 6px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-base); } .sp-pdf-dialog-filerow { display: flex; align-items: center; gap: 8px; } .sp-pdf-dialog-presets { display: flex; gap: 6px; margin: 0 0 16px; } .sp-pdf-preset { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); cursor: pointer; } .sp-pdf-preset:hover { background: var(--color-primary-surface); } .sp-pdf-dialog-check { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: var(--font-sm); color: var(--color-text-primary); } .sp-pdf-dialog-warn { margin: 14px 0 0; padding: 10px 8px; border-radius: 6px; background: var(--color-warning-surface); color: var(--color-warning-dark); font-size: var(--font-xs); } .sp-pdf-dialog-error { margin: 2px 0 0; font-size: var(--font-xs); color: var(--color-error); } .sp-pdf-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .sp-pdf-dialog-ok { padding: 6px 14px; border: none; border-radius: 6px; background: none; color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .sp-pdf-dialog-ok:hover { background: var(--color-primary-surface); } .sp-pdf-dialog-cancel { padding: 6px 12px; border: none; border-radius: 6px; background: none; color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .sp-pdf-dialog-cancel:hover { background: var(--color-bg-sunken); } .sp-pdf-stamp-dialog { width: 400px; } .sp-pdf-stamp-list { max-height: 250px; overflow-y: auto; margin: 12px 0; } .sp-pdf-stamp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .sp-pdf-stamp-row:hover { background: var(--color-bg-sunken); } .sp-pdf-stamp-row.is-selected { background: var(--color-primary-surface); } .sp-pdf-stamp-row img { width: 30px; height: 30px; object-fit: contain; } .sp-pdf-notice { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 45; max-width: 70%; margin: 0; padding: 8px 14px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: var(--shadow-sm); font-size: var(--font-sm); color: var(--color-text-secondary); }   .pdf-landing-preview { position: absolute; left: 24px; bottom: calc(100% + 4px); z-index: 20; width: 198px; height: 158px; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: var(--shadow-md); } .pdf-landing-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .pdf-landing-preview-wait { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .rt-al-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .15); }   .rt-al-panel { position: fixed; top: var(--topbar-height); right: 0; bottom: 0; z-index: 901; width: min(920px, 100vw); display: flex; flex-direction: column; background: var(--color-bg-base); border-left: 1px solid var(--color-border-default); box-shadow: 0 8px 32px rgba(0, 0, 0, .18); } .rt-al-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--color-border-default); } .rt-al-head-title { flex: 1; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .rt-al-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; cursor: pointer; color: var(--color-text-tertiary); } .rt-al-close:hover { background: var(--color-bg-sunken); } .rt-al-body { flex: 1; min-height: 0; display: flex; } .rt-al-left { width: 360px; flex: none; overflow-y: auto; padding: 14px 16px 16px; background: var(--color-bg-base); border-right: 1px solid var(--color-border-default); } .rt-al-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg-sunken); } .rt-al-label { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; } .rt-al-label-gap { margin-top: 16px; } .rt-al-preset { width: 100%; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); }   .rt-al-dim-card { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--color-feature-tracking-surface); border: 1px solid var(--color-border-default); } .rt-al-dim-col { min-width: 0; } .rt-al-dim { font-size: 19px; font-weight: 700; color: var(--color-text-primary); line-height: 1.15; } .rt-al-count { font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); } .rt-al-dim-cap { font-size: 10px; color: var(--color-text-tertiary); } .rt-al-ref { margin-left: auto; max-width: 110px; text-align: right; font-size: 10px; color: var(--color-text-secondary); }   .rt-al-queue { display: flex; flex-direction: column; } .rt-al-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; padding: 8px; border-radius: 8px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); } .rt-al-kind { flex: none; margin-top: 1px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .rt-al-kind.sender { background: var(--color-info-surface); color: var(--color-info); } .rt-al-item-main { flex: 1; min-width: 0; } .rt-al-item-name { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-al-item-sub { display: flex; gap: 6px; font-size: 10.5px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-al-item-tag { font-weight: 700; } .rt-al-qty { display: flex; align-items: center; gap: 2px; } .rt-al-qty-btn { width: 22px; height: 22px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); color: var(--color-text-primary); } .rt-al-qty-value { min-width: 22px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--color-text-primary); } .rt-al-item-remove { width: 22px; height: 22px; cursor: pointer; background: transparent; border: none; color: var(--color-text-tertiary); } .rt-al-summary { margin-top: 4px; padding: 7px 9px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); background: var(--color-bg-sunken); } .rt-al-addsender-row { margin-top: 10px; } .rt-al-addsender { padding: 6px 10px; cursor: pointer; font-size: 11.5px; color: var(--color-info); border: 1px solid var(--color-info); border-radius: 6px; background: var(--color-bg-base); }   .rt-al-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .rt-al-seg-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 7px; cursor: pointer; font-size: 12px; border: 1px solid var(--color-border-default); border-radius: 7px; background: var(--color-bg-base); color: var(--color-text-secondary); } .rt-al-seg-btn.on { background: var(--color-feature-tracking-surface); border-color: var(--color-feature-tracking); color: var(--color-feature-tracking); } .rt-al-seg-btn input { margin: 0; } .rt-al-fmt { display: flex; gap: 16px; } .rt-al-radio { display: flex; align-items: center; gap: 5px; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .rt-al-note { margin-top: 5px; font-size: 10.5px; color: var(--color-text-tertiary); }   .rt-al-preview-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 8px; } .rt-al-preview-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } .rt-al-preview-preset { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } .rt-al-pager { margin-left: auto; display: flex; align-items: center; gap: 2px; } .rt-al-page-btn { width: 26px; height: 24px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); color: var(--color-text-primary); } .rt-al-page-btn:disabled { opacity: .4; cursor: default; } .rt-al-page-text { min-width: 60px; text-align: center; font-size: 11.5px; color: var(--color-text-secondary); } .rt-al-preview { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 8px; }   .rt-al-paper { position: relative; aspect-ratio: 210 / 297; height: 100%; max-height: 100%; max-width: 100%; background: var(--color-label-paper); border: 1px solid var(--color-border-default); box-shadow: 2px 3px 0 rgba(0, 0, 0, .08); }   .rt-al-print { position: absolute; left: 2.381%; right: 2.381%; top: 1.684%; bottom: 1.684%; display: grid; } .rt-al-print.cut-grid { border: 1px solid var(--color-label-cut-line); } .rt-al-print.cut-grid .rt-al-cell { border-right: 1px solid var(--color-label-cut-line); border-bottom: 1px solid var(--color-label-cut-line); } .rt-al-print.cut-tombo .rt-al-cell { background-image: linear-gradient(var(--color-label-cut-line), var(--color-label-cut-line)), linear-gradient(var(--color-label-cut-line), var(--color-label-cut-line)); background-repeat: no-repeat; background-size: 16% 1px, 1px 16%; background-position: left top, left top; } .rt-al-cell { position: relative; overflow: hidden; padding: 6% 9%; display: flex; flex-direction: column; gap: 1px; color: var(--color-label-ink); font-size: clamp(5px, 1.05vh, 11px); line-height: 1.25; } .rt-al-cell.sender { background: color-mix(in srgb, var(--color-info) 6%, transparent); } .rt-al-cell-tag { align-self: flex-start; padding: 0 3px; border-radius: 2px; font-size: .8em; color: var(--color-text-on-primary); background: var(--color-feature-tracking); } .rt-al-cell-tag.sender { background: var(--color-info); } .rt-al-cell-zip, .rt-al-cell-addr { white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .rt-al-cell-name { font-weight: 600; font-size: 1.6em; overflow: hidden; } .rt-al-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); } .rt-al-legend { flex: 1; display: flex; align-items: center; gap: 5px; } .rt-al-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--color-feature-tracking); } .rt-al-swatch.sender { margin-left: 14px; background: var(--color-info); } .rt-al-legend-text { font-size: 11px; color: var(--color-text-tertiary); } .rt-al-create { display: flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 6px; } .rt-al-create:disabled { opacity: .5; cursor: default; } @media (max-width: 900px) { .rt-al-body { flex-direction: column; } .rt-al-left { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border-default); } }   .mail-marks-table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 8px 0; } .mail-marks-table th, .mail-marks-table td { border-bottom: 1px solid var(--color-border-default); padding: 8px 10px; text-align: left; vertical-align: top; } .mail-marks-table th { color: var(--color-text-tertiary); font-weight: 600; white-space: nowrap; } .mail-marks-table td { color: var(--color-text-secondary); } .mail-marks-act { width: 1%; white-space: nowrap; text-align: right; } .mail-marks-printall { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }   .mail-marks-auto, .mail-marks-manual { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 8pt; white-space: nowrap; } .mail-marks-auto { background: var(--color-success-bg, rgba(34, 187, 128, .12)); color: var(--color-primary-on-surface); } .mail-marks-manual { background: var(--color-warning-bg, rgba(245, 158, 11, .12)); color: var(--color-warning); }   .mail-marks-sheets { display: none; } @media print {   .settings-tab-section { display: none; } .mail-marks-sheets { display: block; } .mail-marks-sheet {   page-break-after: always; break-after: page; text-align: center; padding-top: 28mm; } .mail-marks-sheet:last-child { page-break-after: auto; break-after: auto; } .mail-marks-sheet-kind { font-size: 48pt; font-weight: bold; letter-spacing: .25em; margin: 0 0 18mm; color: #000; }   .mail-marks-sheet-code { font-family: "Consolas", "Courier New", monospace; font-size: 30pt; letter-spacing: .08em; margin: 0 0 24mm; color: #000; } .mail-marks-sheet-note { font-size: 11pt; color: #333; margin: 0; } } 
/*css/screens/22-sidebar-theme.css*/
    .avatar-rank-badge { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); min-width: 16px; height: 16px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-bg-base); border: 1px solid var(--color-border-default); font-size: var(--font-2xs); font-weight: 700; color: var(--color-text-secondary); pointer-events: none; }   .avatar-online-dot { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-success); border: 2px solid var(--color-bg-base); pointer-events: none; } .btn-avatar { position: relative; }   .user-pending-verification { margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--font-2xs); color: var(--color-error); } .user-pending-verification:hover { text-decoration: underline; }   .mile-info-row {   display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px auto 0; padding: 4px 5px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-secondary); } .mile-info-row:hover { background: var(--color-primary-surface-light); } .mile-rank-coin {   width: 22px; height: 22px; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--color-primary); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-2xs); font-weight: 700; } .mile-k-value { font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); } .mile-k-unit { font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-chevron { font-size: var(--font-md); color: var(--color-text-tertiary); }   .mile-info-anchor {   position: relative; align-self: stretch; } .mile-flyout-overlay { position: fixed; inset: 0; z-index: 40; }   .mile-flyout {     position: fixed; left: calc(var(--sidebar-width) + 8px); z-index: 41; width: 320px; min-width: 280px; max-width: 340px; max-height: 540px; overflow-y: auto; overflow-x: hidden; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); text-align: left; cursor: default; }   .mile-hero { padding: 12px 16px 14px; border-radius: 12px 12px 0 0;   background: linear-gradient(135deg, var(--sc-hero-a, var(--color-primary-surface)) 0%, var(--sc-hero-b, var(--color-primary-surface)) 100%); } .mile-hero-title { font-size: var(--font-2xs); font-weight: 700; color: var(--color-text-tertiary); } .mile-hero-km { display: flex; align-items: flex-end; gap: 0; margin-top: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; } .mile-hero-month { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin: 0 6px 3px 0; } .mile-hero-value { font-size: var(--font-2xl); font-weight: 700; color: var(--color-primary-on-surface); line-height: 1; } .mile-hero-unit { font-size: var(--font-sm); color: var(--color-text-secondary); margin: 0 0 3px 3px; } .mile-hero-info { font-size: var(--font-2xs); color: var(--color-text-tertiary); margin: 0 0 4px 6px; } .mile-hero-hint { margin-top: 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .mile-explain { margin-top: 8px; padding: 10px 12px; background: var(--color-bg-elevated); border-radius: 8px; } .mile-explain-title { margin-bottom: 4px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-primary); }   .mile-explain-body { margin: 0; font-size: var(--font-2xs); line-height: 17px; color: var(--color-text-secondary); white-space: pre-line; } .mile-explain-note { margin: 6px 0 0; font-size: var(--font-2xs); line-height: 17px; color: var(--color-text-tertiary); }   .mile-section { margin: 14px 16px 0; } .mile-section-last { margin: 0 16px 12px; } .mile-section-header { display: flex; align-items: center; margin-bottom: 6px; } .mile-section-accent { width: 3px; height: 12px; margin-right: 6px; border-radius: 2px; background: var(--color-primary); } .mile-section-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .mile-divider { height: 1px; margin: 12px 0; background: var(--color-border-default); opacity: 0.5; }   .mile-inline-info { margin-left: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .mile-inline-info:hover { color: var(--color-primary-on-surface); } .mile-inline-link { padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-primary-on-surface); } .mile-inline-link:hover { text-decoration: underline; }   a.mile-inline-link { display: block; width: fit-content; margin-top: 3px; text-decoration: none; } a.mile-inline-link:hover { text-decoration: underline; } a.mile-heatmap-link { margin: 6px 0 2px; }   .mile-rank-row { display: flex; align-items: center; margin-top: 2px; } .mile-rank-coin-svg { flex-shrink: 0; margin-right: 12px; } .mile-rank-texts { min-width: 0; } .mile-rank-label { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); } .mile-rank-cumulative { margin-top: 1px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .mile-progress-track { height: 8px; margin-top: 11px; border-radius: 4px; background: color-mix(in srgb, var(--color-border-default) 40%, transparent); overflow: hidden; } .mile-progress-fill { height: 100%; border-radius: 4px; background: var(--color-primary); } .mile-next-destination { margin-top: 5px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-since { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .mile-fold-toggle { display: block; width: 100%; margin-top: 9px; padding: 0; text-align: left; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-fold-toggle:hover { color: var(--color-primary-on-surface); } .mile-journey { margin: 6px 0 4px; } .mile-journey-intro { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; background: var(--color-primary-surface); font-size: var(--font-2xs); line-height: 16px; color: var(--color-text-secondary); } .mile-journey-links { display: flex; align-items: center; margin-top: 2px; } .mile-journey-sep { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: pre; }   .mile-city-card { margin-top: 8px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); overflow: hidden; } .mile-city-photo { display: flex; align-items: center; justify-content: center; height: 120px; background: var(--color-bg-sunken); overflow: hidden; } .mile-city-photo img { width: 100%; height: 120px; object-fit: cover; display: block; } .mile-city-photo-loading { font-size: var(--font-2xl); color: var(--color-text-tertiary); opacity: 0.4; } .mile-city-texts { padding: 8px 10px; } .mile-city-text { font-size: var(--font-2xs); line-height: 16px; color: var(--color-text-secondary); } .mile-city-source { display: inline-block; margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); text-decoration: none; word-break: break-all; } .mile-city-source:hover { text-decoration: underline; }   .mile-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .mile-passport { margin-top: 10px; } .mile-passport-header { margin-bottom: 4px; font-size: var(--font-2xs); font-weight: 500; color: var(--color-text-secondary); } .mile-passport-stamps { display: flex; flex-wrap: wrap; } .mile-stamp { display: inline-flex; align-items: center; margin: 0 4px 4px 0; padding: 2px 6px; border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-base); cursor: pointer; } .mile-stamp:hover { border-color: var(--color-primary); } .mile-stamp-badge { margin-right: 3px; font-size: 11px; } .mile-stamp-name { font-size: 10px; color: var(--color-text-secondary); }   .mile-status-row { display: flex; align-items: center; margin-bottom: 3px; } .mile-status-name { margin-right: 8px; font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); } .mile-status-pill { padding: 4px 10px; border-radius: 13px; background: var(--color-primary-surface); font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-on-surface); } .mile-status-note { margin-bottom: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .mile-overdue { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: var(--color-error-surface); } .mile-overdue-title { font-size: var(--font-2xs); color: var(--color-error); } .mile-overdue-note { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .mile-breakdown { margin-top: 6px; } .mile-breakdown-row { display: flex; align-items: center; margin: 1.5px 0; } .mile-breakdown-emoji { margin-right: 6px; font-size: 12px; } .mile-breakdown-label { flex: 1; font-size: 11px; color: var(--color-text-secondary); } .mile-breakdown-value { font-size: 11px; font-weight: 600; color: var(--color-text-primary); } .mile-breakdown-value.negative { color: var(--color-error); } .mile-coverage { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .mile-coverage-head { display: flex; align-items: center; gap: 5px; } .mile-coverage-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); } .mile-coverage-detail { margin-top: 3px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .mile-coverage-rate { font-size: var(--font-lg); font-weight: 700; color: var(--color-primary-on-surface); }   .mile-held { margin-bottom: 8px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-action-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mile-action-chip { display: flex; flex-direction: column; align-items: center; padding: 9px 6px; border: 1px solid var(--color-border-default); border-radius: 9px; background: var(--color-bg-elevated); cursor: pointer; } .mile-action-chip:hover { border-color: var(--color-primary); background: var(--color-primary-surface); } .mile-chip-emoji { font-size: var(--font-lg); } .mile-chip-label { margin-top: 3px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-primary); } .mile-ai-unlock { margin-top: 10px; } .mile-ai-unlock-note { margin: 0 0 6px; font-size: var(--font-2xs); line-height: 16px; color: var(--color-text-secondary); } .mile-ai-tiers { display: flex; flex-wrap: wrap; gap: 6px; } .mile-ai-tier { padding: 4px 12px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-elevated); color: var(--color-text-primary); font-size: var(--font-2xs); cursor: pointer; } .mile-ai-tier:hover:not(:disabled) { border-color: var(--color-primary); } .mile-ai-tier:disabled { opacity: 0.4; cursor: default; } .mile-ai-result { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-ai-result.ok { color: var(--color-primary-on-surface); } .mile-record { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .mile-donate { position: relative; height: 100%; background: var(--color-bg-base); } .mile-donate-scroll { height: 100%; overflow-y: auto; } .mile-donate-inner { max-width: 460px; margin: 20px 24px 28px; } .mile-donate-heart { margin: 4px 0 6px; font-size: 40px; text-align: center; color: var(--color-primary-on-surface); } .mile-donate-title { margin-bottom: 4px; font-size: var(--font-lg); font-weight: 600; color: var(--color-text-primary); text-align: center; } .mile-donate-sub { margin-bottom: 12px; font-size: var(--font-xs); line-height: 18px; color: var(--color-text-secondary); text-align: center; } .mile-donate-held-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 20px; padding: 6px 14px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-elevated); } .mile-donate-held { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mile-donate-section-title { margin-bottom: 10px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mile-donate-causes { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .mile-donate-cause { display: flex; flex-direction: column; align-items: flex-start; width: 128px; margin: 0 8px 8px 0; padding: 12px; text-align: left; border: 1.5px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); cursor: pointer; } .mile-donate-cause.selected { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .mile-donate-cause-emoji { margin-bottom: 4px; font-size: 26px; } .mile-donate-cause-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mile-donate-cause-unit { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-donate-desc { margin-bottom: 8px; padding: 12px 14px; border-radius: 10px; background: var(--color-bg-elevated); font-size: var(--font-xs); line-height: 19px; color: var(--color-text-secondary); } .mile-donate-note { margin: 0 2px 20px; font-size: var(--font-2xs); line-height: 16px; color: var(--color-text-tertiary); } .mile-donate-stepper { display: flex; align-items: center; margin-bottom: 6px; } .mile-donate-pill { width: 36px; height: 36px; border: 1px solid var(--color-border-default); border-radius: 18px; background: var(--color-bg-elevated); color: var(--color-text-primary); font-size: var(--font-xs); cursor: pointer; } .mile-donate-pill:hover { border-color: var(--color-primary); } .mile-donate-count-box { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 96px; height: 36px; margin: 0 8px; padding: 0 14px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); } .mile-donate-count { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .mile-donate-count-unit { font-size: var(--font-xs); color: var(--color-text-secondary); } .mile-donate-unit-cost { margin-bottom: 10px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .mile-donate-impact { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; background: var(--color-primary-surface-light); font-size: var(--font-sm); font-weight: 600; color: var(--color-primary-on-surface); text-align: center; } .mile-donate-cta { width: 100%; height: 48px; border: 0; border-radius: 10px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-md); font-weight: 600; cursor: pointer; } .mile-donate-cta:hover:not(:disabled) { background: var(--color-primary-dark); } .mile-donate-cta:disabled { opacity: 0.4; cursor: default; } .mile-donate-error { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); } .mile-donate-divider { height: 1px; margin: 22px 0 16px; background: var(--color-border-default); opacity: 0.6; } .mile-donate-record-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .mile-donate-record-emoji { font-size: var(--font-md); } .mile-donate-record-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .mile-donate-record-total { margin-bottom: 10px; font-size: var(--font-sm); color: var(--color-text-primary); } .mile-donate-record-row { margin-bottom: 6px; font-size: var(--font-xs); color: var(--color-text-secondary); } .mile-donate-record-empty { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .mile-donate-celebration { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: var(--color-bg-base); } .mile-donate-celebration-inner { max-width: 380px; margin: 28px; text-align: center; } .mile-donate-celebration-mark { margin-bottom: 4px; font-size: 52px; animation: mile-donate-pop 320ms ease-out; } @keyframes mile-donate-pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } } .mile-donate-celebration-title { margin-bottom: 10px; font-size: var(--font-lg); font-weight: 600; color: var(--color-text-primary); } .mile-donate-celebration-impact { margin-bottom: 14px; font-size: var(--font-md); color: var(--color-primary-on-surface); } .mile-donate-celebration-card { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--color-bg-elevated); } .mile-donate-celebration-thanks { margin-bottom: 8px; font-size: var(--font-sm); font-style: italic; color: var(--color-text-primary); } .mile-donate-celebration-total { font-size: var(--font-xs); color: var(--color-text-secondary); } .mile-donate-celebration-close { height: 42px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .mile-donate-celebration-close:hover { background: var(--color-primary-dark); }   .wattmap { position: relative; height: 100%; min-height: 420px; } .wattmap-canvas { width: 100%; height: 100%; min-height: 420px; } .wattmap-canvas.hidden { visibility: hidden; } .wattmap-fallback { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--color-bg-sunken); } .wattmap-fallback-icon { font-size: var(--font-3xl); color: var(--color-text-tertiary); opacity: 0.4; } .wattmap-spinner { width: 24px; height: 24px; margin-top: 12px; border-radius: 12px; border: 3px solid var(--color-border-default); border-top-color: var(--color-primary); animation: wattmap-spin 0.7s linear infinite; } @keyframes wattmap-spin { to { transform: rotate(360deg); } } .wattmap-fallback-text { font-size: var(--font-sm); color: var(--color-text-secondary); }   .wattmap-pulse-marker { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #22BB80; box-shadow: 0 0 0 0 rgba(34, 187, 128, 0.5); animation: wattmap-pulse 2s infinite; } @keyframes wattmap-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 187, 128, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(34, 187, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 187, 128, 0); } } .wattmap-milestone-label { padding: 3px 8px; border: 1px solid #e8e8ef; border-radius: 6px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); font-size: 11px; font-weight: 600; color: #1a1a2e; white-space: nowrap; } .wattmap-current-label { font-size: 12px; font-weight: 700; color: #1a1a2e; white-space: nowrap; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; } .wattmap-city-popup-content { max-width: 260px; font-size: 12px; line-height: 1.6; color: #1a1a2e; } .wattmap-city-popup-content div:first-child { margin-bottom: 2px; font-size: 14px; font-weight: 700; } .wattmap-city-popup-content div:nth-child(2) { margin-bottom: 6px; font-size: 11px; color: #8b8b9e; }   .nav-expanded-projects { margin: 0 8px; } .nav-expanded-projects-separator { margin: 4px 4px; border: 0; border-top: 1px solid var(--color-border-default); } .nav-expanded-projects-title { margin: 2px 0 4px 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .nav-expanded-projects-list { display: flex; flex-wrap: wrap; } .nav-expanded-project { width: 28px; height: 28px; margin: 2px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); cursor: pointer; background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 700; } .nav-expanded-project:hover { background: var(--color-primary-surface-light); }   .view-density-toggle { display: flex; flex-direction: column; gap: 4px; width: 100%; } .view-density-label { font-size: var(--font-sm); color: var(--color-text-primary); } .view-density-buttons { display: flex; } .density-btn { flex: 1; padding: 4px 6px; cursor: pointer; background: transparent; border: 1px solid var(--color-border-muted); font-size: var(--font-xs); color: var(--color-text-secondary); } .density-btn-left { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .density-btn-center { border-left: 0; border-right: 0; } .density-btn-right { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .density-btn.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: 600; } .nav-expanded-project { overflow: hidden; } .nav-expanded-project-img { width: 100%; height: 100%; object-fit: cover; }   .nav-shortcuts { margin: 0 8px; } .nav-shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 4px; } .nav-shortcuts-title { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .nav-shortcuts-edit { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-text-tertiary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: 800; line-height: 1; cursor: pointer; } .nav-shortcuts-edit:hover { background: var(--color-primary); } .nav-shortcuts-list { display: flex; flex-wrap: wrap; } .nav-shortcut { width: 28px; height: 28px; margin: 2px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; overflow: hidden; cursor: pointer; text-decoration: none; } .nav-shortcut-img { width: 24px; height: 24px; object-fit: cover; } .nav-shortcut-star { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-super-dark-green); }   .topbar-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; margin-right: 8px; padding: 0 10px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--font-xs); font-weight: 600; } .topbar-pill:hover { background: rgba(255, 255, 255, 0.28); } .topbar-pill-icon { width: 16px; height: 16px; }   .topbar-help-pill { min-width: 26px; padding: 4px 8px; font-size: var(--font-sm); font-weight: var(--weight-semibold); line-height: 1; } .global-search-results-header { padding: 10px 14px 6px; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .global-search-state { padding: 10px 14px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .topbar-qr-wrap { position: relative; display: inline-flex; } .topbar-qr-button { padding: 0 8px; } .topbar-qr-overlay { position: fixed; inset: 0; z-index: 60; } .topbar-qr-popup { position: absolute; top: 34px; right: 0; z-index: 61; width: 240px; padding: 14px; text-align: center; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .topbar-qr-title { font-weight: 600; color: var(--color-text-primary); } .topbar-qr-image { width: 160px; height: 160px; margin: 10px auto; display: block; } .topbar-qr-note { font-size: var(--font-xs); color: var(--color-text-secondary); } .topbar-qr-open { width: 100%; margin-top: 10px; padding: 8px 0; cursor: pointer; border: 0; border-radius: var(--radius-md); font-weight: 600; background: var(--color-primary); color: #fff; } .topbar-qr-dismiss { margin-top: 8px; padding: 0; cursor: pointer; border: 0; background: none; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .topbar-qr-dismiss:hover { text-decoration: underline; }   .theme-dashboard { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }     .theme-trash { padding: 0 20px 20px; overflow-y: auto; } .theme-trash-note { margin: 18px 0 14px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-trash-empty { padding: 24px 0; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-trash-list { list-style: none; margin: 0; padding: 0; } .theme-trash-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-border-muted); } .theme-trash-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .theme-trash-name { font-size: var(--font-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .theme-trash-caption { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .theme-trash-oldnote { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-trash-restore { padding: 3px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .theme-trash-restore:hover { background: var(--color-primary-surface-light); } .theme-quickfilter {   display: flex; gap: 0; padding: 0 32px; border-bottom: 1px solid var(--color-border-default); } .theme-quickfilter-tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; margin-right: 20px; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .theme-quickfilter-tab:hover { color: var(--color-text-primary); } .theme-quickfilter-tab.active { color: var(--color-primary-on-surface); border-bottom-color: var(--color-primary); font-weight: 600; }   .theme-toolbar {   display: flex; align-items: center; gap: 12px; padding: 16px 32px; position: relative; } .theme-toolbar-spacer { flex: 1 1 0; min-width: 0; } .theme-search {   position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 360px; min-width: 160px; max-width: 360px; height: 36px; padding: 0 12px; background: var(--color-bg-sunken); border: 1px solid transparent; border-radius: 18px; } .theme-search:focus-within { border-color: var(--color-primary); background: var(--color-bg-base); } .theme-search-icon { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; } .theme-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--font-sm); } .theme-search-watermark { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-tertiary);   z-index: 1; } .theme-toolbar-btn {   display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; height: 32px; padding: 4px 8px; cursor: pointer; background: transparent; border: 0; border-radius: var(--radius-md); font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .theme-toolbar-btn:hover { background: var(--color-bg-sunken); } .theme-toolbar-btn.active { color: var(--color-primary-on-surface); } .theme-toolbar-btn-accent { color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .theme-toolbar-icon { width: 16px; height: 16px; } .theme-viewswitch { display: inline-flex; flex-shrink: 0; height: 32px; padding: 2px; background: var(--color-bg-sunken); border-radius: 8px; } .theme-viewswitch-btn {   min-width: 36px; height: 28px; padding: 4px 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--color-text-tertiary); } .theme-viewswitch-btn:first-child { border-radius: 6px; } .theme-viewswitch-btn:last-child { border-radius: 6px; } .theme-viewswitch-btn.active { background: var(--color-bg-base); color: var(--color-primary-on-surface); box-shadow: var(--shadow-sm); }   .theme-viewswitch-btn.is-explorer { color: var(--color-avatar-palette-amber); } .theme-viewswitch-btn.is-explorer svg { fill: currentColor; } .theme-add-btn {   display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; height: 28px; padding: 4px 12px; cursor: pointer; border: 0; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); }   .theme-activefilter { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }   .theme-activefilter-pill-remove {   display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; font-size: var(--font-xs); line-height: 1; color: inherit; opacity: 0.7; } .theme-activefilter-pill-remove:hover { opacity: 1; color: var(--color-error); } .theme-activefilter-pill { padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-xs); }   .theme-sort-overlay { position: fixed; inset: 0; z-index: 30; } .theme-sort-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .theme-sort-popup {   position: absolute; top: 32px; left: 0; z-index: 31; width: 220px; padding: 6px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .theme-sort-title { padding: 4px 10px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-tertiary); } .theme-sort-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 10px; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font-size: var(--font-sm); color: var(--color-text-primary); } .theme-sort-item:hover { background: var(--color-bg-sunken); } .theme-sort-item.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .theme-sort-tag { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .theme-loading{ padding: 40px 16px; text-align: center; color: var(--color-text-tertiary); }   .theme-table-wrap { flex: 1; min-height: 0; overflow: auto; margin: 16px 32px; padding: 0; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; } .theme-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); } .theme-table th {   position: sticky; top: 0; z-index: 1; padding: 12px; text-align: left; white-space: nowrap; background: var(--color-bg-base); color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-default); font-size: 12px; font-weight: var(--weight-semibold); } .theme-table td { height: 56px; padding: 0 12px; border-bottom: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-table-row { cursor: pointer; } .theme-table-row:hover { background: var(--color-primary-surface-light); }   .theme-table th.theme-table-filecount, .theme-table-filecount { text-align: right; white-space: nowrap; } .theme-table-filecount-num { font-size: var(--font-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .theme-table-filecount.is-zero .theme-table-filecount-num { color: var(--color-text-disabled); }   .theme-table-name.is-empty { color: var(--color-text-secondary); font-weight: var(--weight-normal); }   .theme-card-filecount.is-zero { color: var(--color-text-disabled); } .theme-table-filecount-unit { margin-left: 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-table-name { color: var(--color-text-primary); font-size: var(--font-base); font-weight: var(--weight-medium); } .theme-badge-mine { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-on-primary); font-size: 9px; } .theme-badge-recent{ display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--color-primary-on-surface); }   .theme-quickfilter-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-text-secondary); color: var(--color-text-secondary); } .theme-quickfilter-tab:hover .theme-quickfilter-check { border-color: var(--color-text-primary); } .theme-quickfilter-tab.active .theme-quickfilter-check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }   .theme-quickfilter-fav.active svg { fill: currentColor; stroke-width: 2; }   .theme-table-avatar { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; margin-right: 8px; border-radius: 10px; overflow: hidden; color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: 600; } .theme-table-avatar img { width: 100%; height: 100%; object-fit: cover; }   .theme-table-avatar.is-empty { opacity: 0.55; }   .theme-badge-lock { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--color-text-secondary); }   .theme-status-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .theme-status-chip:empty { display: none; } .theme-status-chip.is-small { padding: 0 6px; } .theme-status-chip.is-outofservice { background: var(--color-error-surface); }   .theme-table-catdot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: var(--radius-full); vertical-align: middle; }   .theme-statusbar { flex-shrink: 0; display: flex; align-items: center; gap: 24px; height: 40px; padding: 0 24px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-statusbar-item { display: inline-flex; align-items: center; gap: 8px; } .theme-statusbar-track { display: inline-block; width: 60px; height: 3px; border-radius: 2px; background: var(--color-border-default); overflow: hidden; } .theme-statusbar-fill { display: block; height: 100%; border-radius: 2px; background: var(--color-primary); } .theme-statusbar-fill.is-info { background: var(--color-info); }   .theme-table th.theme-table-sortable { cursor: pointer; user-select: none; } .theme-table th.theme-table-sortable:hover { color: var(--color-text-primary); } .theme-table-sort-arrow { display: inline-flex; margin-left: 4px; vertical-align: middle; color: var(--color-primary-on-surface); } .theme-table-sort-arrow.is-desc { transform: rotate(180deg); }   .theme-badge-memo { display: inline-flex; margin-left: 6px; vertical-align: middle; color: var(--color-text-tertiary); }   .theme-table-fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px; padding: 0; vertical-align: middle; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--color-text-tertiary); visibility: hidden; } .theme-table-row:hover .theme-table-fav-btn, .theme-table-fav-btn.is-on { visibility: visible; } .theme-table-fav-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .theme-table-fav-btn.is-on { color: var(--color-primary-on-surface); }   .theme-card-memo { display: flex; align-items: flex-start; gap: 4px; max-width: 100%; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-card-memo-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }   .theme-kanban-card[draggable="true"] { cursor: grab; } .theme-kanban-col.is-drag-over { outline: 2px solid var(--color-primary); background: var(--color-primary-surface-light); }   .theme-cards { flex: 1; min-height: 0; overflow: auto; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 12px 12px; } .theme-card { position: relative; }   .theme-card-catbar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius-md) 0 0 var(--radius-md); } .theme-card-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .theme-card-sep { color: var(--color-text-disabled); font-size: var(--font-xs); }   .theme-card.is-invalid, .theme-kanban-card.is-invalid { opacity: 0.4; }   .theme-kanban-avatar { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: 600; } .theme-kanban-avatar img { width: 100%; height: 100%; object-fit: cover; } .theme-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 200px; padding: 12px; cursor: pointer; text-align: left; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .theme-card:hover { border-color: var(--color-primary); } .theme-card-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); }   .theme-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .theme-card-head .theme-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-card-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: 600; } .theme-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .theme-card-generating { flex: 0 0 auto; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-card-meta { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .theme-kanban-head { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; } .theme-kanban-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-kanban-group { padding: 3px 10px; cursor: pointer; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-kanban-group.active { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .theme-kanban { flex: 1; min-height: 0; display: flex; gap: 10px; overflow: auto; padding: 0 12px 12px; } .theme-kanban-col { width: 220px; flex-shrink: 0; padding: 8px; background: var(--color-bg-sunken); border-radius: var(--radius-lg); } .theme-kanban-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .theme-kanban-count { color: var(--color-text-tertiary); } .theme-kanban-card { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%; margin-bottom: 6px; padding: 8px; cursor: pointer; text-align: left; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .theme-kanban-card:hover { border-color: var(--color-primary); }   .theme-overview { border-bottom: 1px solid var(--color-border-default); } .theme-overview-bar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; cursor: pointer; text-align: left; background: var(--color-primary-surface-light); border: 0; } .theme-overview-bar:hover { background: var(--color-primary-surface); }   .theme-overview-tile { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); }   .theme-overview-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-overview-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .theme-overview-pill { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 5px; }   .theme-overview-chevron { line-height: 1; } .theme-overview-body {   display: flex; flex-wrap: wrap; gap: 0; padding: 2px 4px 0 14px; background: var(--color-bg-sunken); } .theme-overview-card {   display: flex; flex-direction: row; gap: 9px; align-items: flex-start; min-width: 172px; margin: 0 10px 10px 0; padding: 10px 11px; cursor: pointer; text-align: left; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 11px; } .theme-overview-card-tile { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary-surface); color: var(--color-primary-dark); } .theme-overview-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .theme-overview-card:hover { background: var(--color-bg-sunken); border-color: var(--color-primary); }   .cabinet-section { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; } .cabinet-section-head { display: flex; align-items: center; margin-top: 8px; } .cabinet-section-bar { width: 3px; height: 16px; margin-right: 10px; border-radius: 2px; background: var(--color-primary); } .cabinet-section-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cabinet-section-card { padding: 10px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 10px; }   .theme-sync { padding: 16px; } .theme-sync-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .theme-sync-current { margin-top: 4px; font-size: var(--font-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }   .theme-sync-card { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); } .theme-sync-card-unavailable { opacity: 0.6; } .theme-sync-card-head { display: flex; align-items: center; gap: 8px; } .theme-sync-card-icon { color: var(--color-text-tertiary); flex: none; } .theme-sync-card-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .theme-sync-card-note { margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); overflow-wrap: anywhere; } .cabinet-compliance-tiles { display: flex; flex-wrap: wrap; gap: 8px; } .cabinet-compliance-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 140px; padding: 10px 12px; cursor: pointer; text-align: left; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 8px; } .cabinet-compliance-tile:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); } .cabinet-compliance-tile-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cabinet-compliance-tile-note { font-size: var(--font-xs); color: var(--color-text-tertiary); } .cabinet-childtheme-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--color-border-muted); } .cabinet-childtheme-row:last-child { border-bottom: 0; } .cabinet-childtheme-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--color-primary-muted); } .cabinet-childtheme-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-primary); } .cabinet-childtheme-status { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; }   .cabinet-progress-overlay { display: flex; align-items: center; justify-content: center; } .cabinet-progress-card { min-width: 320px; padding: 20px; border-radius: 12px; background: var(--color-bg-base); box-shadow: var(--shadow-lg); } .cabinet-progress-label { margin-bottom: 8px; font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cabinet-progress-bar { display: block; width: 100%; height: 6px; margin-bottom: 8px; border: 0; border-radius: 3px; background: var(--color-bg-sunken); accent-color: var(--color-primary); } .cabinet-progress-bar::-webkit-progress-bar { background: var(--color-bg-sunken); border-radius: 3px; } .cabinet-progress-bar::-webkit-progress-value { background: var(--color-primary); border-radius: 3px; } .cabinet-progress-count { font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-overview-card-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .theme-overview-card-note { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .theme-filter-overlay { position: fixed; inset: 0; z-index: 30; } .theme-filter-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .theme-filter-host {     position: absolute; top: 32px; left: 0; z-index: 31; width: 420px; max-width: calc(100vw - 40px); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .theme-filter-panel { padding: 12px; max-height: 70vh; overflow: auto; } .theme-filter-search { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-bottom: 8px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); } .theme-filter-search-icon { width: 14px; height: 14px; color: var(--color-text-tertiary); flex-shrink: 0; } .theme-filter-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--font-sm); } .theme-filter-search-watermark { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-tertiary);   z-index: 1; } .theme-filter-search-clear { border: 0; background: none; cursor: pointer; color: var(--color-text-tertiary); }   .theme-search-clear { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-text-tertiary); } .theme-search-clear:hover { color: var(--color-text-secondary); } .theme-filter-summary { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .theme-filter-summary-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-filter-summary-count { font-size: var(--font-sm); font-weight: 700; color: var(--color-primary-on-surface); } .theme-filter-clear-all { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-filter-clear-all:hover { text-decoration: underline; }   .theme-filter-result { margin-left: auto; display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .theme-filter-result-num { font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-primary); }   .theme-filter-result.is-zero .theme-filter-result-num, .theme-filter-result.is-zero .theme-filter-result-unit { color: var(--color-error); } .theme-filter-clear-all:disabled { opacity: 0.4; cursor: default; } .theme-filter-result-unit { margin-right: 8px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .theme-filter-result-total { font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-filter-sections { display: flex; flex-wrap: wrap; gap: 8px; } .theme-filter-section { width: calc(50% - 4px); padding: 8px; background: var(--color-bg-sunken); border-radius: var(--radius-md); } .theme-filter-section-head { display: flex; align-items: center; margin-bottom: 4px; } .theme-filter-section-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .theme-filter-section-clear { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .theme-filter-item { display: flex; align-items: center; gap: 6px; padding: 3px 2px; cursor: pointer; }   .theme-filter-item.is-inactive .theme-filter-item-label { font-style: italic; color: var(--color-text-tertiary); } .theme-filter-item.is-unavailable { opacity: 0.5; cursor: default; } .theme-filter-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-primary); } .theme-filter-item-count { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .theme-filter-noitem { padding: 8px 2px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-filter-noitem-note { margin-top: 2px; font-size: var(--font-2xs); } .theme-filter-includeinvalid { display: flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-filter-combine { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .theme-filter-combine-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .theme-filter-combine-btn { padding: 3px 10px; cursor: pointer; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-filter-combine-btn.active { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .theme-filter-saved { margin-top: 12px; } .theme-filter-saved-head { display: flex; align-items: center; } .theme-filter-saved-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-secondary); } .theme-filter-saved-add { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: var(--font-xs); color: var(--color-primary-on-surface); } .theme-filter-saved-form { display: flex; gap: 6px; margin-top: 6px; } .theme-filter-saved-form input { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--font-xs); } .theme-filter-saved-ok { padding: 0 10px; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-size: var(--font-xs); } .theme-filter-saved-cancel { padding: 0 10px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: transparent; font-size: var(--font-xs); color: var(--color-text-secondary); } .theme-filter-saved-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .theme-filter-saved-apply { flex: 1; min-width: 0; padding: 4px 8px; cursor: pointer; text-align: left; background: var(--color-bg-sunken); border: 0; border-radius: var(--radius-sm); font-size: var(--font-xs); color: var(--color-text-primary); } .theme-filter-saved-delete { border: 0; background: none; cursor: pointer; color: var(--color-text-tertiary); } .theme-filter-keyhint { margin-top: 10px; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .theme-filter-key { margin: 0 2px; font-weight: 600; color: var(--color-text-secondary); }     .theme-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--color-bg-base); } .theme-drilldown-head { display: flex; align-items: stretch; gap: 0; padding: 0; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); }   .theme-drilldown-accent { width: 6px; flex-shrink: 0; } .theme-drilldown-headbody { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; padding: 8px 16px; } .theme-drilldown-headsep { width: 1px; height: 20px; margin: 0 10px 0 4px; background: var(--color-border-default); flex-shrink: 0; } .theme-drilldown-back {   flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; margin-right: 2px; background: transparent; border: 0; border-radius: 7px; font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .theme-drilldown-back:hover { background: var(--color-bg-sunken); }   .theme-drilldown-titlewrap { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; margin-right: 10px; } .theme-drilldown-title {   max-width: 100%; min-width: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 2px 3px; border: 0; border-radius: 8px; background: transparent; font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .theme-drilldown-title:hover { background: var(--color-bg-sunken); } .theme-drilldown-name { min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-drilldown-chevron { flex-shrink: 0; color: var(--color-text-tertiary); } .theme-drilldown-avatar { flex-shrink: 0; object-fit: cover; width: 32px; height: 32px; border-radius: 8px; } .theme-drilldown-avatarwrap { position: relative; flex-shrink: 0; display: inline-flex; } .theme-drilldown-lock { position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-warning); color: var(--color-text-on-primary); } .theme-drilldown-chip.is-outofservice { background: var(--color-error-surface); } .theme-switch-avatar { flex-shrink: 0; object-fit: cover; width: 22px; height: 22px; border-radius: 6px; } .theme-drilldown-avatar.is-initial, .theme-switch-avatar.is-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 11px; font-weight: var(--weight-semibold); } .theme-switch-popup { position: absolute; left: 0; top: calc(100% + 4px); z-index: 1001; width: 260px; max-height: 360px; overflow-y: auto; padding: 5px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-elevated); box-shadow: var(--shadow-md); } .theme-switch-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font-size: var(--font-sm); color: var(--color-text-primary); } .theme-switch-item:hover { background: var(--color-primary-surface-light); } .theme-switch-item.is-current { background: var(--color-primary-surface); } .theme-switch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .theme-drilldown-chip { flex-shrink: 0; padding: 2px 6px; margin-right: 4px; border-radius: 6px; border: 1px solid var(--color-border-default); background: transparent; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; } .theme-drilldown-chip-last { margin-right: 12px; }   .theme-drilldown-members { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; } .theme-drilldown-members .avatar-circle { width: 22px; height: 22px; font-size: var(--font-2xs); } .theme-drilldown-membercount { font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; } .theme-drilldown-spacer { flex: 1 1 auto; min-width: 8px; }   .theme-drilldown-fav { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .theme-drilldown-fav:hover { background: var(--color-bg-sunken); } .theme-drilldown-fav.is-on { color: var(--color-primary-on-surface); } .theme-drilldown-fav.is-on svg { fill: currentColor; } .theme-drilldown-delete {   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--color-text-tertiary); } .theme-drilldown-delete:hover { background: var(--color-error-surface); color: var(--color-error); }   .task-from-message-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.25); } .task-from-message-dialog { position: fixed; z-index: 901; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; max-width: calc(100vw - 32px); padding: 18px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .task-from-message-title { margin-bottom: 12px; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .task-from-message-field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .task-from-message-field > span { width: 44px; flex-shrink: 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .task-from-message-field input, .task-from-message-field select { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-sm); background: var(--color-bg-base); color: var(--color-text-primary); } .task-from-message-field input:focus, .task-from-message-field select:focus { outline: none; border-color: var(--color-primary); } .task-from-message-actions { display: flex; justify-content: flex-end; gap: 8px; } .task-from-message-cancel { height: 30px; padding: 0 14px; cursor: pointer; background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: var(--font-sm); color: var(--color-text-secondary); } .task-from-message-save { height: 30px; padding: 0 14px; cursor: pointer; background: var(--color-primary); border: 0; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: 600; color: #fff; } .task-from-message-save:disabled { opacity: 0.6; cursor: default; }   .nav-header { flex-direction: column; align-items: center; gap: 0; } .nav-header .avatar-btn-wrap { position: relative; } .nav-header .btn-avatar {   width: 60px; height: 60px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .nav-header .btn-avatar:hover { background: transparent; }     .nav-header .avatar-circle { width: 52px; height: 52px; border-radius: 5px; border-width: 0; background: transparent; } .nav-header .avatar-circle .avatar-img { border-radius: 5px; } .nav-header .avatar-circle:has(.avatar-initial) { border-radius: var(--radius-avatar); border: 2px solid var(--color-primary); background: var(--color-primary-muted); }     .avatar-ring-svg { position: absolute; inset: 0; width: 60px; height: 60px; pointer-events: none; } .avatar-ring-track { stroke: var(--color-border-default); opacity: 0.25; } .avatar-ring-progress { stroke: var(--color-primary); }   .avatar-rank-badge { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;   background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #fff 45%) 0%, var(--tier-color, #B4B4B4) 55%, color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #000 30%) 100%); border: 2px solid var(--color-bg-sunken); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tier-color, #B4B4B4) 100%, #000 30%); color: #fff; font-weight: 700; font-size: 13px; line-height: 1; pointer-events: none; }   .avatar-rank-badge.dormant { opacity: 0.6; }   .avatar-online-dot { position: absolute; right: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-success); border: 2px solid var(--color-bg-sunken); pointer-events: none; }   .nav-header .nav-header-info { align-items: center; text-align: center; margin-top: 6px; } .nav-header .user-name { font-weight: var(--weight-semibold); max-width: 160px; } .user-email-row { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-text-tertiary); } .user-email-row .user-email { max-width: 130px; } .user-email-edit { width: 9px; height: 9px; flex-shrink: 0; } .user-email-row:hover .user-email { text-decoration: underline; }     .ta-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); cursor: pointer; } .ta-band:hover { background: var(--color-bg-sunken); }   .ta-band-quiet { height: 28px; padding: 0 12px; } .ta-items { display: flex; align-items: center; min-width: 0; } .ta-item { display: flex; align-items: center; gap: 5px; padding-left: 10px; margin-left: 10px; border-left: 1px solid var(--color-border-default); white-space: nowrap; } .ta-item:first-child { border-left: 0; padding-left: 0; margin-left: 0; } .ta-item-name { font-size: 10px; color: var(--color-text-tertiary); }   .ta-item-value { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .ta-open { margin-left: auto; font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; }   .ta-accent-message svg { color: var(--color-feature-message); } .ta-accent-warning svg { color: var(--color-warning); } .ta-accent-info svg { color: var(--color-info); } .ta-accent-timelog svg { color: var(--color-feature-timelog); }   .ta-band-alert { height: 28px; padding: 0; gap: 0; } .ta-stripe { flex: 0 0 3px; align-self: stretch; background: var(--color-status-banner-accent-warning, var(--color-warning)); } .ta-alert-icon { flex: 0 0 auto; margin-left: 10px; display: flex; align-items: center; } .ta-alert-icon svg { color: var(--color-warning-on-surface); } .ta-alert-title { min-width: 0; flex: 1 1 auto; margin: 0 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .ta-pill { flex: 0 0 auto; margin-right: 12px; height: 20px; border-radius: 10px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: var(--color-text-on-primary); background: var(--color-status-banner-accent-warning, var(--color-warning)); white-space: nowrap; }   .ta-reserve .main-content, .sb-reserve .main-content { padding-bottom: 28px; } .ta-reserve .sidebar, .sb-reserve .sidebar { padding-bottom: 28px; }   .sb-reserve .ta-band { display: none; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .ta-band { display: none; } .ta-reserve .main-content, .ta-reserve .sidebar, .sb-reserve .main-content, .sb-reserve .sidebar { padding-bottom: 0; } }   .sb-band[hidden], .sb-popup[hidden] { display: none !important; } .sb-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; height: 28px; display: flex; align-items: center; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); cursor: pointer; } .sb-band:hover { background: var(--color-bg-elevated); }   .rw-pill { position: fixed; left: 50%; transform: translateX(-50%); z-index: 1199; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: var(--radius-full); background: var(--color-text-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-lg); pointer-events: none;   } .rw-pill[hidden] { display: none !important; } .rw-pill-spinner { flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid var(--color-overlay-white-30); border-top-color: var(--color-text-on-primary); border-radius: 50%; animation: spin 1s linear infinite; } .rw-pill-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-stripe { flex: 0 0 3px; align-self: stretch; background: var(--color-status-banner-accent-warning); } .sb-icon { flex: 0 0 auto; margin-left: 10px; display: flex; align-items: center; color: var(--color-status-banner-icon-fg-warning); } .sb-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .sb-title { min-width: 0; flex: 1 1 auto; margin: 0 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .sb-noaction, .sb-action { flex: 0 0 auto; margin-right: 10px; height: 20px; border-radius: 10px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; white-space: nowrap; border: 1px solid var(--color-border-muted); color: var(--color-text-secondary); } .sb-check { color: var(--color-success); } .sb-more { flex: 0 0 auto; margin-right: 12px; font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; } .sb-popup { position: fixed; right: 12px; bottom: 34px; z-index: 42; width: 440px; max-width: calc(100vw - 24px); display: flex; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 14px; overflow: hidden; } .sb-popup-stripe { flex: 0 0 4px; background: var(--color-status-banner-accent-warning); } .sb-popup-body { flex: 1 1 auto; min-width: 0; } .sb-popup-head { display: flex; align-items: center; margin: 14px 16px 4px; } .sb-popup-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-status-banner-icon-bg-warning); color: var(--color-status-banner-icon-fg-warning); } .sb-popup-title { flex: 1 1 auto; min-width: 0; margin: 0 10px 0 12px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); } .sb-popup-chip { flex: 0 0 auto; height: 22px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; background: var(--color-status-banner-icon-bg-warning); color: var(--color-status-banner-icon-fg-warning); } .sb-popup-main { padding: 4px 16px 14px; } .sb-sec-label { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); } .sb-sec-label:first-child { margin-top: 6px; } .sb-what { margin: 0; font-size: 12px; color: var(--color-text-secondary); } .sb-impact { display: flex; gap: 10px; padding: 10px 13px; border-radius: 10px; background: var(--color-success-surface); } .sb-impact-icon { flex: 0 0 auto; margin-top: 2px; color: var(--color-success-dark); } .sb-impact-title { font-size: 12px; font-weight: 700; color: var(--color-success-dark); } .sb-impact-body { margin-top: 1px; font-size: 12px; color: var(--color-text-secondary); } .sb-impact.is-info { background: var(--color-info-surface); } .sb-impact.is-info .sb-impact-icon, .sb-impact.is-info .sb-impact-title { color: var(--color-info); } .sb-steps { list-style: none; margin: 0; padding: 0; } .sb-step { display: flex; gap: 10px; margin-bottom: 7px; font-size: 12px; color: var(--color-text-secondary); } .sb-step-num { flex: 0 0 20px; height: 20px; border-radius: 10px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--color-status-banner-icon-bg-warning); color: var(--color-status-banner-icon-fg-warning); }   .sb-signin-btn { margin-top: 4px; width: 100%; } .sb-noaction-row { display: flex; gap: 10px; font-size: 12px; color: var(--color-text-secondary); } .sb-noaction-mark { flex: 0 0 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-success-surface); color: var(--color-success-dark); } .sb-noaction-row strong { color: var(--color-success-dark); } .sb-popup-footer { display: flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); font-size: 10px; color: var(--color-text-tertiary); }   .sb-tone-error .sb-stripe, .sb-tone-error .sb-popup-stripe { background: var(--color-status-banner-accent-error); } .sb-tone-error .sb-icon { color: var(--color-status-banner-icon-fg-error); } .sb-tone-error .sb-popup-icon, .sb-tone-error .sb-popup-chip, .sb-tone-error .sb-step-num { background: var(--color-status-banner-icon-bg-error); color: var(--color-status-banner-icon-fg-error); } .sb-tone-error .sb-action { background: var(--color-status-banner-accent-error); border-color: transparent; color: var(--color-text-on-primary); }   .sb-tone-info .sb-stripe, .sb-tone-info .sb-popup-stripe { background: var(--color-status-banner-accent-info); } .sb-tone-info .sb-icon { color: var(--color-status-banner-icon-fg-info); } .sb-tone-info .sb-popup-icon, .sb-tone-info .sb-popup-chip, .sb-tone-info .sb-step-num { background: var(--color-status-banner-icon-bg-info); color: var(--color-status-banner-icon-fg-info); } .sb-tone-info .sb-action { border-color: var(--color-status-banner-icon-fg-info); color: var(--color-status-banner-icon-fg-info); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .sb-band { bottom: 56px; } .sb-popup { bottom: 90px; } }   .grade-excellent { color: var(--color-success); } .grade-good { color: var(--color-primary-on-surface); } .grade-fair { color: var(--color-text-secondary); } .grade-poor { color: var(--color-warning); } .grade-none { color: var(--color-text-tertiary); }   .home-today-shipping-link { display: inline-block; align-self: center; margin: 0 10px 0 0; font-size: 10px; color: var(--color-feature-tracking); cursor: pointer; white-space: nowrap; } .home-today-shipping-link:hover { text-decoration: underline; }     .home-today-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;   margin: 0 24px 16px;   } @media (max-width: 1100px) { .home-today-row { grid-template-columns: 1fr; } }   .home-schedule-card { background: var(--color-bg-base); border: 1px solid var(--color-google-brand, var(--color-info)); border-radius: 16px; overflow: hidden;   display: flex; flex-direction: column; }   .home-schedule-card-full { grid-column: 1 / -1; }   .home-triage-card-full { grid-column: 1 / -1; } .home-schedule-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px 14px; flex-wrap: wrap; } .home-schedule-icon-wrap { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .home-schedule-icon-wrap svg { box-sizing: content-box; padding: 5px; border-radius: var(--radius-md); background: var(--color-google-brand-surface, var(--color-info-surface)); color: var(--color-google-brand, var(--color-info)); } .home-schedule-chevron { font-size: 11px; color: var(--color-text-tertiary); } .home-schedule-stepper { display: inline-flex; align-items: center; gap: 5px; } .home-schedule-step-btn { width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 14px; line-height: 1; } .home-schedule-step-btn:hover { background: var(--color-border-default); } .home-schedule-step-label { min-width: 104px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); } .home-schedule-today-btn { height: 24px; padding: 0 8px; border: none; border-radius: 6px; cursor: pointer; background: var(--color-google-brand-surface, var(--color-info-surface)); color: var(--color-google-brand, var(--color-info)); font-size: 11.5px; font-weight: 600; } .home-schedule-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--color-bg-sunken); } .home-schedule-seg-btn { border: none; background: transparent; cursor: pointer; padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); } .home-schedule-seg-btn.is-on { background: var(--color-bg-base); color: var(--color-text-primary); } .home-schedule-spacer { flex: 1 1 auto; } .home-schedule-fullwidth-btn { width: 26px; height: 24px; border: none; border-radius: 6px; cursor: pointer; background: var(--color-bg-sunken); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; } .home-schedule-calendar-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-google-brand, var(--color-info)); } .home-schedule-calendar-link:hover { text-decoration: underline; }   .home-schedule-band { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 12px 8px 48px; } .home-schedule-band-chip { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-schedule-band-chip.is-task { background: var(--color-feature-task-surface); color: var(--color-feature-task); } @keyframes sp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }   .home-schedule-empty { margin: 44px 24px 46px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; } .home-schedule-empty-icon { width: 54px; height: 54px; border-radius: 27px; background: var(--color-bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); } .home-schedule-empty-title { margin: 14px 0 0 0; font-size: 15px; font-weight: 600; color: var(--color-text-secondary); } .home-schedule-empty-desc { margin: 6px 0 0 0; max-width: 320px; font-size: 12px; line-height: 18px; color: var(--color-text-tertiary); }   .home-schedule-empty-primary { margin: 18px 0 0 0; padding: 7px 15px; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid var(--color-primary); font-size: 13px; font-weight: 600; color: var(--color-primary-on-surface); } .home-schedule-empty-primary:hover { background: var(--color-primary-surface); }   .home-schedule-empty-secondary { margin: 14px 0 0 0; padding: 0; border: none; background: none; cursor: pointer; font-size: 11.5px; color: var(--color-text-tertiary); } .home-schedule-empty-secondary-label { color: var(--color-google-brand); font-weight: 600; } .home-schedule-empty-secondary:hover .home-schedule-empty-secondary-label { text-decoration: underline; }     .home-schedule-timeline { position: relative; border-top: 1px solid var(--color-border-default); overflow-y: auto; overflow-x: hidden; cursor: pointer; padding-bottom: 10px;     flex: 1 1 auto; }   .home-schedule-scroll-spacer { flex: 0 0 0; width: 0; pointer-events: none; } .home-schedule-timeline, .home-schedule-week-grid { scrollbar-width: thin; scrollbar-color: transparent transparent; } .home-schedule-timeline:hover, .home-schedule-week-grid:hover { scrollbar-color: var(--color-text-tertiary) transparent; } .home-schedule-timeline::-webkit-scrollbar, .home-schedule-week-grid::-webkit-scrollbar { width: 8px; } .home-schedule-timeline::-webkit-scrollbar-track, .home-schedule-week-grid::-webkit-scrollbar-track { background: transparent; } .home-schedule-timeline::-webkit-scrollbar-thumb, .home-schedule-week-grid::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .home-schedule-timeline:hover::-webkit-scrollbar-thumb, .home-schedule-week-grid:hover::-webkit-scrollbar-thumb { background: var(--color-border-muted); } .home-schedule-hour { position: absolute; left: 0; right: 0; height: 0; } .home-schedule-hour-label { position: absolute; left: 8px; top: -7px; font-size: 10px; color: var(--color-text-tertiary); } .home-schedule-hour-line { position: absolute; left: 48px; right: 8px; top: 0; border-top: 1px dashed var(--color-border-default); } .home-schedule-chip { position: absolute; left: 52px; width: calc(100% - 62px); border-radius: var(--radius-sm); padding: 2px 6px; background: var(--color-feature-timelog-surface); border-left: 3px solid var(--color-feature-timelog); overflow: hidden; font-size: 11px; display: flex; flex-direction: column; gap: 1px; } .home-schedule-chip.is-task { background: var(--color-feature-task-surface); border-left-color: var(--color-feature-task); } .home-schedule-chip-time { display: flex; align-items: center; gap: 3px; color: var(--color-text-tertiary); font-size: 10px; }   .home-schedule-chip[style*="color:#"] .home-schedule-chip-time, .home-schedule-chip[style*="color:#"] .home-schedule-chip-title { color: inherit; } .home-schedule-chip[style*="color:#"] .home-schedule-chip-time { opacity: .9; }   .home-schedule-gbadge { flex: 0 0 auto; padding: 0 3px; border-radius: 3px; background: var(--color-google-brand-surface); color: var(--color-google-brand); font-size: 8.5px; font-weight: var(--weight-bold); line-height: 1.5; } .home-schedule-chip[style*="color:#"] .home-schedule-gbadge, .home-schedule-band-chip[style*="color:#"] .home-schedule-gbadge { background: var(--color-overlay-white-22); color: var(--color-text-on-primary); }   .home-schedule-band-chip.is-event { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; } .home-schedule-chip-title { color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .home-schedule-nowline { position: absolute; left: 36px; right: 0; height: 2px; background: var(--color-error); z-index: 4; pointer-events: none; } .home-schedule-nowline.is-week { left: 38px; } .home-schedule-nowlabel { position: absolute; left: -34px; top: -8px; background: var(--color-error); color: var(--color-text-on-primary); border-radius: var(--radius-sm); padding: 1px 4px; font-size: 10px; font-weight: 600; line-height: 1.4; }   .home-schedule-band-chip.is-overdue { background: var(--color-error-surface); color: var(--color-error); }   .home-schedule-week { border-top: 1px solid var(--color-border-default); }   .home-schedule-week-gutter { flex: 0 0 38px; } .home-schedule-week-head { display: flex; align-items: stretch; height: 44px; } .home-schedule-week-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: transparent; border: none; cursor: pointer; padding: 0; border-left: 1px solid var(--color-border-muted); } .home-schedule-week-day:last-child { border-right: 1px solid var(--color-border-muted); } .home-schedule-week-day:hover { background: var(--color-bg-sunken); } .home-schedule-week-day.is-today { background: var(--color-google-brand-surface); } .home-schedule-week-dow { font-size: 10px; color: var(--color-text-tertiary); } .home-schedule-week-dow.is-today { font-weight: 700; color: var(--color-google-brand); } .home-schedule-week-dow.is-sun { color: var(--color-error); } .home-schedule-week-dow.is-sat { color: var(--color-google-brand); } .home-schedule-week-date { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .home-schedule-week-date.is-today { width: 26px; height: 26px; border-radius: 13px; background: var(--color-google-brand); color: var(--color-text-on-primary); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }   .home-schedule-week-band { display: flex; align-items: flex-start; padding-bottom: 4px; } .home-schedule-week-bandcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 2px; } .home-schedule-week-bandchip, .home-schedule-week-morechip { height: 15px; line-height: 15px; border-radius: 3px; padding: 0 4px; font-size: 9.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--color-bg-sunken); color: var(--color-text-secondary); } .home-schedule-week-bandchip.is-task { background: var(--color-feature-task-surface); color: var(--color-feature-task); border-left: 3px solid var(--color-feature-task); } .home-schedule-week-bandchip.is-overdue { background: var(--color-error-surface); color: var(--color-error); border-left-color: var(--color-error); } .home-schedule-week-morechip { color: var(--color-text-tertiary); }   .home-schedule-week-grid { position: relative; display: flex; align-items: stretch; overflow-y: auto; overflow-x: hidden; padding-bottom: 10px; } .home-schedule-week-grid .home-schedule-hour-label { left: 3px; } .home-schedule-week-grid .home-schedule-hour-line { left: 38px; right: 0; } .home-schedule-week-col { position: relative; flex: 1 1 0; min-width: 0; border-left: 1px solid var(--color-border-muted); cursor: pointer; } .home-schedule-week-col:last-child { border-right: 1px solid var(--color-border-muted); } .home-schedule-week-col.is-today { background: var(--color-google-brand-surface); } .home-schedule-week-col .home-schedule-chip { left: 2px; width: calc(100% - 4px); font-size: 10px; } .home-schedule-week-col .home-schedule-chip-time { font-size: 9px; }     .home-discovery-head { display: flex; align-items: center; gap: 8px; margin: 24px 24px 8px; } .home-discovery-head-title { font-size: 11px; font-weight: 600;   color: var(--color-text-tertiary); } .home-discovery-openall { margin-left: auto; margin-right: 8px; font-size: 11px; font-weight: 600; color: var(--color-primary-on-surface); cursor: pointer; white-space: nowrap; } .home-discovery-openall:hover { text-decoration: underline; } .home-discovery-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;   height: 40px;   margin: 0 24px 24px; } .home-discovery-card { display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px;   padding: 0 8px 0 10px;   cursor: pointer; } .home-discovery-card:hover { background: var(--color-bg-sunken); } .home-discovery-card.is-recommended { background: var(--color-ai-assist-surface); }   .home-discovery-icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }   .home-discovery-icon.is-create::after { content: "+"; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 9px; line-height: 11px; text-align: center; font-weight: 700; border: 1.5px solid var(--color-bg-base); } .home-discovery-title { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600;   color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-discovery-sparkle { font-size: 11px; margin-left: 4px; }   .home-discovery-pin { flex: 0 0 auto; font-size: 11px; opacity: 0; cursor: pointer; line-height: 1; transition: opacity var(--duration-fast, 150ms) ease; } .home-discovery-card:hover .home-discovery-pin { opacity: 0.45; } .home-discovery-pin.is-pinned, .home-discovery-card:hover .home-discovery-pin.is-pinned { opacity: 1; } .home-discovery-pin:hover { opacity: 0.8; }   .accent-file { background: var(--color-feature-file); } .accent-contact { background: var(--color-feature-contact); } .accent-timelog { background: var(--color-feature-timelog); } .accent-ai { background: var(--color-ai-assist-accent); } .accent-primary { background: var(--color-primary); }   .accent-file-plate { background: color-mix(in srgb, var(--color-feature-file) 12%, transparent); } .accent-file-fg { color: var(--color-feature-file); }   @media (max-width: 1100px) { .home-discovery-rail { grid-template-columns: repeat(2, 1fr); height: auto; } .home-discovery-card { height: 52px; } }     .home-triage-slot { display: flex; flex-direction: column; min-width: 0; } .home-triage-slot > .home-triage-card { flex: 1 1 auto; }   .home-triage-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-4, 16px); } .home-triage-head { display: flex; align-items: center; margin-bottom: 12px; } .home-triage-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .home-triage-remaining { margin-left: auto; font-size: 10px; color: var(--color-text-tertiary); opacity: 0.7; }   .home-triage-empty { text-align: center; padding: 32px 24px; } .home-triage-empty-icon { font-size: 40px; margin-bottom: 8px; } .home-triage-empty-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); } .home-triage-empty-sub { font-size: 12px; color: var(--color-text-tertiary); margin: 4px auto 0; max-width: 320px; }   .home-triage-undo { display: flex; align-items: center; gap: 8px; background: var(--color-success-surface); border: 1px solid var(--color-success); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; color: var(--color-text-primary); } .home-triage-undo-btn { margin-left: auto; padding: 4px 10px; cursor: pointer; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: 12px; }   .home-triage-next { display: flex; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 14px; margin: 4px 0 24px 0; min-height: 200px; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12)); overflow: hidden; } .home-triage-next-accent { width: 6px; flex: 0 0 6px; } .home-triage-next-body { flex: 1 1 auto; padding: 20px 24px; min-width: 0; } .home-triage-next-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .home-triage-src-icon { font-size: 13px; } .home-triage-src-label { font-size: 12px; font-weight: 600; } .src-message { background: var(--color-feature-message); } .src-task { background: var(--color-feature-task); } .src-shipping { background: var(--color-feature-tracking); } .src-none { background: var(--color-text-tertiary); } .home-triage-badge { margin-left: 4px; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; color: var(--color-text-primary); } .badge-error { background: var(--color-error-surface); } .badge-warning { background: var(--color-warning-surface); } .badge-plain { background: var(--color-bg-sunken); } .home-triage-next-row2 { display: flex; gap: 14px; margin-bottom: 6px; } .home-triage-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--radius-avatar); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 18px; font-weight: 600; } .home-triage-avatar img { width: 100%; height: 100%; object-fit: cover; } .home-triage-next-texts { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .home-triage-next-sender { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-triage-next-title { font-size: 17px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; }   .home-triage-senders { margin-bottom: 10px; } .home-triage-senders-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; } .home-triage-sender { display: inline-flex; align-items: center; gap: 6px; } .home-triage-sender-avatar { width: 28px; height: 28px; border-radius: var(--radius-avatar); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; border: 1px solid var(--color-border-default); } .home-triage-sender-avatar img { width: 100%; height: 100%; object-fit: cover; } .home-triage-sender-name { font-size: 12px; color: var(--color-text-secondary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-triage-more { padding: 2px 6px; border-radius: 10px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 12px; } .home-triage-sender-summary { font-size: 12px; color: var(--color-text-tertiary); } .home-triage-next-summary { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 8px; max-height: 60px; overflow: hidden; } .home-triage-next-context { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 12px; }   .home-triage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .home-triage-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: none; border-radius: var(--radius-md); cursor: pointer; background: var(--color-primary); color: var(--color-text-on-primary); font-weight: 600; font-size: 13px; } .home-triage-btn-primary:hover { filter: brightness(0.94); } .home-triage-btn-icon { display: inline-flex; align-items: center; gap: 6px; min-width: 40px; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 13px; } .home-triage-btn-icon:hover { background: var(--color-primary-surface-light, var(--color-bg-sunken)); }   .home-triage-btn-skip .home-triage-skip-glyph { opacity: 0.75; } .home-triage-kbd { padding: 1px 4px; border-radius: 3px; font-size: 10px; background: var(--color-bg-sunken); color: var(--color-text-tertiary); } .home-triage-kbd-on { padding: 1px 4px; border-radius: 3px; font-size: 10px; background: rgba(255,255,255,0.15); color: #fff; opacity: 0.85; }   .home-triage-kbd, .home-triage-kbd-on { visibility: hidden; } button:hover > .home-triage-kbd, button:hover > .home-triage-kbd-on, button:focus-visible > .home-triage-kbd, button:focus-visible > .home-triage-kbd-on { visibility: visible; }   .home-triage-snooze { margin-top: 8px; padding: 8px; min-width: 180px; display: inline-flex; flex-direction: column; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12)); } .home-triage-snooze > button { padding: 8px 12px; text-align: left; border: none; background: transparent; cursor: pointer; color: var(--color-text-primary); font-size: 13px; border-radius: var(--radius-sm); } .home-triage-snooze > button:hover { background: var(--color-bg-sunken); } .home-triage-snooze-custom { display: flex; align-items: center; gap: 6px; margin: 4px 8px; padding-top: 6px; border-top: 1px solid var(--color-border-default); font-size: 12px; color: var(--color-text-secondary); } .home-triage-snooze-custom input { width: 130px; } .home-triage-snooze-custom button { padding: 4px 10px; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-bg-base); }   .home-triage-group { display: flex; align-items: center; margin: 12px 0 4px 0; } .home-triage-group-name { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); } .home-triage-group-count { margin-left: auto; font-size: 10px; color: var(--color-text-tertiary); opacity: 0.6; }   .home-triage-row { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); margin-bottom: 2px; padding: 7px 8px 7px 0; cursor: pointer; min-width: 0; } .home-triage-row:hover { background: var(--color-primary-surface-light, var(--color-bg-sunken)); } .home-triage-row-accent { width: 3px; align-self: stretch; border-radius: 2px 0 0 2px; flex: 0 0 3px; } .home-triage-row-icon { font-size: 12px; margin-left: 7px; } .home-triage-row-title { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-triage-row-sender { color: var(--color-text-secondary); margin-right: 4px; } .home-triage-row-meta { font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; } .home-triage-row-actions { display: inline-flex; gap: 4px; } .home-triage-row-btn-primary { padding: 3px 8px; border: none; border-radius: var(--radius-sm); cursor: pointer; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 600; } .home-triage-row-btn { padding: 3px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 10px; }   .home-triage-expand { text-align: center; margin-top: 10px; cursor: pointer; font-size: 12px; color: var(--color-text-secondary); } .home-triage-expand:hover { text-decoration: underline; }   .home-activity-link { display: inline-block; margin-top: 10px; cursor: pointer; font-size: var(--font-2xs); color: var(--color-primary-on-surface); text-decoration: none; } .home-activity-link:hover { text-decoration: underline; } .home-rateinfo-body .home-activity-link { font-size: var(--font-xs); font-weight: var(--weight-medium); }       .home-rateinfo-overlay { position: fixed; left: 0; right: 0; top: var(--topbar-height); bottom: 0; z-index: 450; display: flex; justify-content: flex-end; } .home-rateinfo-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); } .home-rateinfo-panel { position: relative; width: 460px; max-width: 92vw; height: 100%; background: var(--color-bg-base); border-left: 1px solid var(--color-border-default); display: flex; flex-direction: column; } .home-rateinfo-header { display: flex; align-items: center; height: 48px; padding: 0 4px 0 16px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); } .home-rateinfo-title { font-size: 17px; font-weight: 600; } .rateinfo-message { color: var(--color-feature-message); } .rateinfo-warning { color: var(--color-warning); } .rateinfo-info { color: var(--color-info); } .rateinfo-timelog { color: var(--color-feature-timelog); } .home-rateinfo-close { margin-left: auto; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-size: 14px; } .home-rateinfo-body { padding: 12px 16px 16px 16px; overflow-y: auto; } .home-rateinfo-intro { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 12px 0; line-height: 1.6; } .home-rateinfo-sec { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 12px; } .home-rateinfo-sec p { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 3px 0; line-height: 1.6; } .home-rateinfo-sec p:last-child { margin-bottom: 0; } .home-rateinfo-key { font-weight: 500; color: var(--color-text-primary); }     .folder-alert { display: inline-flex; align-items: center; justify-content: center; height: 16px; min-width: 20px; padding: 0 var(--space-1); margin-left: var(--space-1); border-radius: 8px; flex-shrink: 0; font-size: var(--font-2xs); font-weight: var(--weight-bold); line-height: 1; color: var(--color-text-on-primary); background: var(--color-primary); } .folder-alert.red { background: var(--color-error); } .folder-alert.green { background: var(--color-primary); } .folder-alert.warning { background: var(--color-warning); }   .folder-alert.info { background: var(--color-info); }   .folder-alert.pin { background: var(--color-feature-pin); } .folder-alert.gray { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); }   .folder-item-inbox { background: var(--color-bg-elevated); border-left: 3px solid transparent; border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-1); color: var(--color-text-primary); font-weight: var(--weight-semibold); }   .folder-item-inbox:hover { background: var(--color-primary-surface-light); padding-left: var(--space-3); } .folder-item-inbox.active { background: var(--color-primary-surface); border-left-color: var(--color-primary); color: var(--color-primary-on-surface); } .folder-item-inbox .folder-alert { height: 22px; min-width: 22px; border-radius: 11px; padding: 0 var(--space-2); }   .folder-spine { list-style: none; margin: 0; padding: 0; } .folder-spine > li { list-style: none; } .folder-spine-row { padding: var(--space-2) var(--space-3); border-left: 3px solid transparent; font-size: var(--font-sm); color: var(--color-text-secondary); } .folder-spine-row:hover { background: var(--color-primary-surface-light); padding-left: var(--space-3); } .folder-spine-row.active { background: var(--color-primary-surface); border-left-color: var(--color-primary); font-weight: var(--weight-semibold); }   .folder-spine-chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; margin-left: var(--space-1); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; transition: transform var(--duration-fast) var(--ease-default); } button.folder-spine-chevron:hover { background: var(--color-primary-surface-light); } .folder-spine-chevron.open { transform: rotate(90deg); color: var(--color-primary-on-surface); }   .folder-spine-chevron.placeholder { visibility: hidden; cursor: default; }   .folder-item-inbox .folder-spine-chevron { margin-left: 0; margin-right: calc(var(--space-3) * -1); }   .list-context-bar { display: flex; align-items: center; gap: 6px; margin: var(--space-1) var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-bg-elevated); font-size: var(--font-sm); color: var(--color-text-secondary); } .list-context-accent { width: 3px; align-self: stretch; border-radius: 2px; background: var(--color-success); } .list-context-kind { font-weight: var(--weight-semibold); } .list-context-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }   .quote-neglect-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2) 0; padding: 8px var(--space-2); max-width: 640px; border-radius: var(--radius-md); border-left: 3px solid var(--color-warning); background: var(--color-warning-surface); } .quote-neglect-nudge .qnn-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--color-status-banner-icon-bg-warning); color: var(--color-status-banner-icon-fg-warning); } .quote-neglect-nudge .qnn-text { display: flex; flex-direction: column; gap: 2px;   min-width: min(12em, 100%); flex: 1; } .quote-neglect-nudge .qnn-lead { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .quote-neglect-nudge .qnn-sub { font-size: var(--font-2xs); color: var(--color-text-secondary); } .quote-neglect-nudge .qnn-action { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; min-height: 28px; padding: 4px 12px; border: 0; border-radius: 14px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .quote-neglect-nudge .qnn-action:hover { background: var(--color-primary-dark); } .quote-neglect-nudge .qnn-action:active { transform: scale(0.98); } .quote-task-coach { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2) 0; padding: 7px var(--space-2); max-width: 640px; border-radius: var(--radius-md); border-left: 3px solid var(--color-feature-task); background: var(--color-feature-task-surface); } .quote-task-coach .qtc-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--color-status-banner-icon-bg-info); color: var(--color-status-banner-icon-fg-info); } .quote-task-coach .qtc-text { font-size: var(--font-xs); color: var(--color-text-secondary); }   .fb-card { margin: var(--space-1) 0; border: 1px solid var(--color-border-default); border-radius: 12px;   background: var(--color-bg-base);   overflow: hidden; max-width: 100%; }   .fb-band { height: 5px; } .fb-band-primary { background: linear-gradient(90deg, var(--color-primary) 0%, var(--fb-band-mid) 55%, var(--fb-band-logo-blue) 100%); } .fb-band-info { background: linear-gradient(90deg, var(--color-info) 0%, var(--fb-band-info-mid) 60%, var(--color-primary) 100%); } .fb-band-warn { background: linear-gradient(90deg, var(--color-warning) 0%, var(--fb-band-warn-mid) 70%, var(--color-warning-dark) 100%); } .fb-body { padding: var(--space-3) var(--space-4); }   .fb-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .fb-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; } .fb-title { flex: 1; min-width: 0;   font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .fb-category { flex-shrink: 0; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-2xs); font-weight: var(--weight-semibold); }   .fb-tone-primary { background: var(--color-primary-surface); color: var(--color-primary-dark); } .fb-tone-info { background: var(--color-info-surface); color: var(--color-info); } .fb-tone-warn { background: var(--color-warning-surface); color: var(--color-warning-dark); } .fb-title + .fb-category { margin-left: var(--space-2); }   .fb-warn-banner { margin-bottom: var(--space-2); font-size: var(--font-sm); color: var(--color-text-secondary); } .fb-warn-banner p { margin: 0 0 2px 0; } .fb-warn-lead { font-weight: var(--weight-medium); color: var(--color-text-primary); } .fb-warn-subtitle { margin-top: var(--space-1) !important; font-weight: var(--weight-semibold); color: var(--color-text-primary); } .fb-note { margin-bottom: var(--space-2); font-size: var(--font-xs); color: var(--color-text-secondary); }   .fb-dark-card { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: 10px;   background: var(--fb-dark-card-bg); } .fb-dark-row { display: flex; gap: var(--space-2); padding: 5px 0; border-bottom: 1px solid var(--fb-dark-card-divider); } .fb-dark-row:last-child { border-bottom: none; } .fb-dark-label { flex-shrink: 0; min-width: 120px; font-size: var(--font-2xs); color: var(--fb-dark-card-label); } .fb-dark-value { flex: 1; min-width: 0; font-size: var(--font-xs); color: var(--fb-dark-card-value); word-break: break-word; white-space: pre-wrap; }   .fb-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }   .fb-more { position: static; } .fb-more-summary { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-md); line-height: 1; cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-default); } .fb-more-summary::-webkit-details-marker { display: none; } .fb-more-summary::marker { content: ""; } .fb-more-summary:hover { background: var(--color-bg-sunken); } .fb-more[open] > .fb-more-summary { background: var(--color-bg-sunken); }   .fb-more[open] { flex: 1 0 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } .fb-more-menu { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); width: 100%; margin-top: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--color-border-default); } .fb-more-menu > * { width: 100%; justify-content: flex-start; } .fb-hub-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 4px var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-full); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .fb-hub-link:hover { background: var(--color-primary-surface); }   .fb-original-body { margin-top: var(--space-2); padding: var(--space-2); border-left: 3px solid var(--color-border-default); background: var(--color-bg-sunken); font-size: var(--font-xs); color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word;   max-height: calc(var(--leading-normal) * 3em + var(--space-2) * 2); overflow: hidden; position: relative; }   .fb-original-body.is-open { max-height: none; overflow: visible; }   .fb-original-body:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg-sunken)); pointer-events: none; } .fb-original-toggle { margin-top: var(--space-1); }   .fb-order { margin-top: var(--space-2); } .fb-order-lead { margin: 0; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .fb-order-desc { margin: 2px 0 var(--space-2) 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .fb-order-note { margin: var(--space-2) 0 0 0; font-size: var(--font-xs); color: var(--color-text-secondary); }   .msg-actions { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 0 0; } .msg-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .msg-action-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 4px var(--space-3); border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .msg-action-btn:disabled { cursor: default; opacity: 0.55; } .msg-action-primary { border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-text-on-primary); } .msg-action-primary:hover:not(:disabled) { background: var(--color-primary-dark); } .msg-action-outline { border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary-on-surface); } .msg-action-outline:hover:not(:disabled) { background: var(--color-primary-surface); } .msg-action-negative { border: 1px solid var(--color-error); background: transparent; color: var(--color-error); } .msg-action-negative:hover:not(:disabled) { background: var(--color-error-surface); }   .msg-action-why { font-size: var(--font-2xs); color: var(--color-text-secondary); }   .msg-action-ask { flex: 1 1 200px; font-size: var(--font-xs); color: var(--color-text-primary); }   .msg-action-done { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-primary-on-surface); }   .fb-proof-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; } .fb-proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-sunken); } .fb-proof-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fb-proof-project { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); word-break: break-word; } .fb-proof-dest { font-size: var(--font-xs); color: var(--color-text-secondary); word-break: break-word; }   .fb-proof-meta { flex: 0 0 auto; width: 160px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; } .fb-proof-scanned { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .fb-proof-state { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-primary); white-space: nowrap; }   @media (max-width: 560px) { .fb-proof-meta { width: auto; flex: 1 1 100%; align-items: flex-start; text-align: left; } } .fb-btn-proof-cancel { flex-shrink: 0; }   .fb-proof-confirm { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border-default); } .fb-proof-ask { flex: 1 1 200px; font-size: var(--font-xs); color: var(--color-text-primary); }     .btn-inbox-cleanup { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 6px; border: none; border-radius: 6px; background: transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .btn-inbox-cleanup:hover { background: var(--color-primary-surface); } .btn-inbox-cleanup .cleanup-sparkle { width: 13px; height: 13px; color: var(--color-primary-on-surface); flex: 0 0 auto; } .btn-inbox-cleanup .cleanup-label { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }   .btn-pinbar-show { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 6px; border: none; border-radius: 6px; background: transparent; cursor: pointer; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); white-space: nowrap; transition: background var(--duration-fast) var(--ease-default); } .btn-pinbar-show:hover { background: var(--color-feature-pin-surface); }   .cleanup-panel { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--color-bg-base); }   .cleanup-busy-overlay { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); } .cleanup-busy-inner { text-align: center; } .cleanup-busy-text { font-size: 16px; font-weight: var(--weight-bold); color: #fff; } .cleanup-busy-sub { margin-top: 6px; font-size: var(--font-xs); color: rgba(255, 255, 255, 0.87); }   .cleanup-header { display: flex; align-items: center; padding: 14px 16px 10px 16px; flex: 0 0 auto; } .cleanup-header-icon { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--color-primary-surface); font-size: 20px; } .cleanup-header-texts { margin-left: 12px; min-width: 0; } .cleanup-header-title { font-size: 18px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .cleanup-header-note { font-size: 11.5px; color: var(--color-text-secondary); }   .cleanup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 8px 16px; }   .cleanup-summary-card { padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-lg); background: var(--color-bg-elevated); } .cleanup-summary-total { font-size: 22px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .cleanup-stackbar { display: flex; height: 14px; margin: 12px 0 8px 0; overflow: hidden; } .cleanup-stackbar-seg { min-width: 0; } .cleanup-legend { display: flex; flex-wrap: wrap; } .cleanup-legend-chip { display: inline-flex; align-items: center; margin: 0 14px 4px 0; } .cleanup-legend-dot { width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; flex: 0 0 auto; } .cleanup-legend-text { font-size: 11.5px; color: var(--color-text-secondary); }   .cleanup-stackbar-seg.tone-danger, .cleanup-legend-dot.tone-danger, .cleanup-cat-tone.tone-danger { background: var(--color-error); } .cleanup-stackbar-seg.tone-amber, .cleanup-legend-dot.tone-amber, .cleanup-cat-tone.tone-amber { background: var(--color-warning); } .cleanup-stackbar-seg.tone-keep, .cleanup-legend-dot.tone-keep, .cleanup-cat-tone.tone-keep { background: var(--color-success); } .cleanup-stackbar-seg.tone-blue, .cleanup-legend-dot.tone-blue, .cleanup-cat-tone.tone-blue { background: var(--color-primary); } .cleanup-stackbar-seg.tone-gray, .cleanup-legend-dot.tone-gray, .cleanup-cat-tone.tone-gray { background: var(--color-text-tertiary); } .cleanup-cat-pill.tone-danger { color: var(--color-error); } .cleanup-cat-pill.tone-amber { color: var(--color-warning); } .cleanup-cat-pill.tone-keep { color: var(--color-success); } .cleanup-cat-pill.tone-blue { color: var(--color-primary-on-surface); } .cleanup-cat-pill.tone-gray { color: var(--color-text-tertiary); } .cleanup-state-text { margin: 10px 4px; color: var(--color-text-secondary); }   .cleanup-category { margin-bottom: 10px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-lg); background: var(--color-bg-elevated); overflow: hidden; } .cleanup-cat-head { display: flex; align-items: center; cursor: pointer; } .cleanup-cat-tone { flex: 0 0 4px; align-self: stretch; margin: 10px 0; border-radius: 3px; }   .cleanup-toggle-wrap { flex: 0 0 auto; position: relative; display: inline-flex; margin: 0 12px; cursor: pointer; } .cleanup-toggle-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cleanup-toggle-track { position: relative; display: block; width: 42px; height: 23px; border-radius: 12px; background: var(--color-border-muted); transition: background var(--duration-fast) var(--ease-default); } .cleanup-toggle-input:checked + .cleanup-toggle-track { background: var(--color-primary); } .cleanup-toggle-input:focus-visible + .cleanup-toggle-track { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cleanup-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 9px; background: #fff; transition: left var(--duration-fast) var(--ease-default); } .cleanup-toggle-input:checked + .cleanup-toggle-track .cleanup-toggle-thumb { left: 22px; } .cleanup-cat-texts { flex: 1 1 auto; min-width: 0; margin: 12px 0; } .cleanup-cat-line1 { display: flex; align-items: center; min-width: 0; } .cleanup-cat-name { font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cleanup-cat-pill { margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--color-bg-sunken); font-size: 10.5px; font-weight: var(--weight-semibold); white-space: nowrap; } .cleanup-cat-line2 { display: flex; align-items: center; margin-top: 2px; min-width: 0; } .cleanup-cat-sub { font-size: 11.5px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cleanup-cat-selected { margin-left: 8px; font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; } .cleanup-cat-count { flex: 0 0 auto; margin: 0 10px 0 8px; font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-text-primary); } .cleanup-chevron { flex: 0 0 auto; margin-right: 12px; padding: 0; border: none; background: transparent; font-size: 18px; line-height: 1; color: var(--color-text-tertiary); cursor: pointer; }   .cleanup-cat-expand { border-top: 1px solid var(--color-border-muted); background: var(--color-bg-sunken); } .cleanup-cat-tools { display: flex; align-items: center; justify-content: space-between; margin: 8px 14px; gap: var(--space-2); } .cleanup-cat-tools-note { font-size: 11px; color: var(--color-text-secondary); } .cleanup-cat-tools-actions { display: inline-flex; gap: 12px; } .cleanup-link-btn { border: none; background: transparent; padding: 0; font-size: 11px; color: var(--color-primary-on-surface); cursor: pointer; } .cleanup-link-btn:hover { text-decoration: underline; } .cleanup-item-list { max-height: 380px; overflow-y: auto; } .cleanup-item { display: flex; align-items: flex-start; padding: 9px 14px; border-bottom: 1px solid var(--color-border-muted); }   .cleanup-check-wrap { flex: 0 0 auto; position: relative; display: inline-flex; margin: 1px 11px 0 0; cursor: pointer; } .cleanup-check-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cleanup-check-box { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1.6px solid var(--color-text-tertiary); border-radius: 5px; background: var(--color-bg-elevated); color: transparent; } .cleanup-check-input:checked + .cleanup-check-box { border-color: var(--color-primary); background: var(--color-primary); color: #fff; } .cleanup-check-input:focus-visible + .cleanup-check-box { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cleanup-check-box svg { width: 12px; height: 12px; } .cleanup-item-body { flex: 1 1 auto; min-width: 0; cursor: pointer; } .cleanup-item-line1 { display: flex; align-items: center; min-width: 0; } .cleanup-item-who { flex: 0 0 150px; width: 150px; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cleanup-item-role { flex: 0 0 auto; margin: 0 6px 0 8px; padding: 0 4px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); font-size: 10px; color: var(--color-text-tertiary); } .cleanup-item-subject { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cleanup-item-snippet { margin-top: 2px; font-size: 11.5px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cleanup-item-preview { margin: 7px 0 2px 0; padding: 9px 11px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-elevated); font-size: 12.5px; color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word; } .cleanup-item-when { flex: 0 0 auto; margin: 1px 0 0 8px; font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; }   .cleanup-actionbar { flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--color-border-muted); background: var(--color-bg-elevated); } .cleanup-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 8px; padding: 7px 12px; border-radius: 9px; background: var(--color-primary-surface); } .cleanup-result-text { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--color-text-primary); } .cleanup-undo-btn { flex: 0 0 auto; padding: 4px 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); cursor: pointer; } .cleanup-undo-btn:disabled { opacity: 0.5; cursor: default; } .cleanup-action-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .cleanup-action-counts { display: flex; align-items: center; min-width: 0; } .cleanup-action-label { font-size: var(--font-sm); color: var(--color-text-secondary); } .cleanup-action-number { font-size: 20px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .cleanup-action-unit { font-size: var(--font-sm); color: var(--color-text-secondary); } .cleanup-action-kept { margin-left: 8px; font-size: 11.5px; color: var(--color-text-tertiary); } .cleanup-confirm-btn { flex: 0 0 auto; padding: 10px 20px; border: none; border-radius: 22px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-base); font-weight: var(--weight-bold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .cleanup-confirm-btn:hover:not(:disabled) { background: var(--color-primary-dark); } .cleanup-confirm-btn:disabled { background: var(--color-border-muted); cursor: default; } .cleanup-undo-note { margin-top: 8px; font-size: 11px; color: var(--color-text-tertiary); }   .fb-hint-row { margin-top: var(--space-1); text-align: right; } .fb-hint { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .fb-stepper-host { margin: 0 0 10px; padding: 8px 8px 6px 4px; border-radius: 10px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-muted); overflow-x: auto; } .fb-stepper-label { display: block; margin: 0 0 2px 10px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .fb-stepper-host .tracking-progress { padding: 8px 10px; } .fb-actions { flex-wrap: wrap; } .fb-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px var(--space-4); border: 0; border-radius: var(--radius-full); 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); } .fb-btn-primary:hover { background: var(--color-primary-dark); } .fb-btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-full); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-medium); cursor: pointer; } .fb-btn-outline:hover { background: var(--color-primary-surface); }   .fb-ack-status { display: inline-flex; flex-direction: column; justify-content: center; min-height: 32px; padding: 6px 10px; border-radius: 6px; background: var(--color-bg-sunken); font-size: var(--font-sm); } .fb-ack-done { color: var(--color-success); font-weight: var(--weight-semibold); } .fb-ack-forwarded { color: var(--color-text-secondary); font-weight: var(--weight-medium); white-space: normal; } .fb-btn-info { border-color: var(--color-info); color: var(--color-info); } .fb-btn-info:hover { background: var(--color-info-surface); } .fb-btn-link { border: 0; background: none; padding: 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; text-decoration: underline; } .fb-btn-link-inline { border: 0; background: none; padding: 0; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; text-decoration: underline; } .fb-order-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .fb-footnote { margin: var(--space-1) 0 0 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .fb-dark-input-row { display: flex; gap: var(--space-1); flex: 1; min-width: 0; } .fb-dark-input { flex: 1; min-width: 0; min-height: 28px; padding: 2px var(--space-2); border: 1px solid var(--fb-dark-card-input-border); border-radius: 4px; background: var(--fb-dark-card-input-bg); color: var(--fb-dark-card-value); font-size: var(--font-xs); } .fb-dark-save { flex-shrink: 0; min-height: 28px; padding: 2px var(--space-3); border: 0; border-radius: 4px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); cursor: pointer; } .fb-dark-save:hover { background: var(--color-primary-dark); }   .fb-dark-select { flex-shrink: 0; min-width: 92px; min-height: 28px; padding: 0 6px; border: 1px solid var(--fb-dark-card-input-border); border-radius: 4px; background: var(--fb-dark-card-input-bg); color: var(--fb-dark-card-value); font-size: var(--font-xs); } .fb-dark-detected { flex-shrink: 0; align-self: center; margin-right: 6px; font-size: var(--font-2xs); color: var(--fb-dark-card-value-muted); }   .fb-btn-trackset { gap: 5px; margin-top: var(--space-2); padding: 5px 10px; min-height: 0; font-size: var(--font-xs); }   .fb-hub-link-order { display: flex; margin: var(--space-2) auto 0; width: fit-content; }     .timeline-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .tl-root { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--color-bg-sunken); } .tl-header { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); } .tl-theme-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--color-primary); } .tl-theme-title { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .tl-return-inbox { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 32px; padding: 0 8px 0 4px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 600; cursor: pointer; } .tl-return-inbox:hover { background: var(--color-primary-surface-light); } .tl-crumb-sep { flex: none; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .tl-root:focus { outline: none; }   .detail-timeline-crumb { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 12px; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); } .detail-timeline-crumb-back { flex: none; height: 32px; padding: 0 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 600; cursor: pointer; } .detail-timeline-crumb-back:hover { background: var(--color-primary-surface-light); } .detail-timeline-crumb-sep { flex: none; font-size: var(--font-xs); color: var(--color-text-tertiary); } .detail-timeline-crumb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); }   .tl-summary-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); overflow-x: auto; } .tl-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); cursor: pointer; } .tl-chip:hover { background: var(--color-primary-surface-light); } .tl-chip.off { opacity: .4; background: var(--color-bg-sunken); } .tl-chip svg { width: 12px; height: 12px; flex: none; } .tl-chip-value { font-size: var(--font-xs); font-weight: 500; color: var(--color-text-secondary); }   .tl-main { flex: 1 1 auto; min-height: 0; display: flex; } .tl-index { flex: 0 0 360px; min-width: 0; display: flex; flex-direction: column;   background: var(--color-bg-sunken); border-right: 1px solid var(--color-border-default); overflow: hidden; }   .tl-main.index-full .tl-index { flex: 1 1 auto; border-right: none; } .tl-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }   .tl-index-search { position: relative; flex: none; margin: 6px 12px 0; } .tl-index-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; pointer-events: none; opacity: .45; } .tl-index-search input { width: 100%; box-sizing: border-box; padding: 4px 8px 4px 26px; font-size: var(--font-xs); color: var(--color-text-primary); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); } .tl-index-filter { flex: none; padding: 6px 12px 6px; border-bottom: 1px solid var(--color-border-default); }   .tl-index-row { display: flex; align-items: center; width: 100%; box-sizing: border-box; position: relative; padding: 11px 16px; text-align: left; cursor: pointer; background: transparent; border: none; border-bottom: 1px solid var(--color-border-default); } .tl-index-row:hover { background: var(--color-primary-surface-light); } .tl-index-row:active { background: var(--color-primary-surface); }   .tl-index-all { background: var(--color-bg-elevated); flex: none; }   .tl-index-row.current { background: var(--color-primary-surface); } .tl-index-row.current::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-primary); } .tl-index-row-icon { flex: none; margin-right: 11px; } .tl-index-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tl-index-row-label { font-size: var(--font-sm); font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .tl-index-all .tl-index-row-label { font-weight: 700; }   .tl-index-row-label.unread { font-weight: 700; } .tl-index-row-meta { font-size: var(--font-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-index-row-chevron { flex: none; margin-left: 10px; opacity: .5; }   .tl-index-group { padding: 12px 16px 4px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-tertiary); }   .tl-index-empty { padding: 10px 16px; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-index-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .tl-thread-item-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-error); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: 700; line-height: 18px; text-align: center; }   .tl-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 56px; } .tl-row { display: flex; } .tl-row.gap { margin-top: 12px; } .tl-row.self { justify-content: flex-end; } .tl-date-header { display: flex; align-items: center; gap: 12px; margin: 16px 12px 8px; } .tl-date-header::before, .tl-date-header::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-border-default); } .tl-date-header span { font-size: var(--font-xs); font-weight: 500; color: var(--color-text-tertiary); }   .tl-msg-bubble {   max-width: 91.7%; margin: 4px 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg-base); border: 1px solid var(--color-border-default); cursor: pointer; } .tl-msg-bubble:hover { background: var(--color-bg-elevated); } .tl-msg-bubble.cont { margin-top: 2px; } .tl-msg-head { display: flex; align-items: center; gap: 8px; } .tl-msg-avatar { width: 24px; height: 24px; flex: none; border-radius: var(--radius-avatar); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-2xs); font-weight: 700; line-height: 24px; text-align: center; } .tl-msg-name { font-size: var(--font-xs); font-weight: 600; color: var(--color-text-primary); } .tl-msg-time { margin-left: auto; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-msg-subject { margin-top: 6px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .tl-msg-preview { margin-top: 4px; font-size: var(--font-sm); color: var(--color-text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   .tl-msg-react { margin-top: 6px; } .tl-msg-react-add { width: 28px; height: 28px; padding: 0; border-radius: 14px; cursor: pointer; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); font-size: var(--font-base); line-height: 1; } .tl-msg-react-add:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); } .tl-msg-react-add:active { transform: scale(0.92); }   .tl-card { display: flex; gap: 8px; max-width: 520px; margin: 4px 12px; padding: 12px; border-radius: var(--radius-md); background: var(--color-bg-base); border: 1px solid var(--color-border-default); } .tl-card:hover { background: var(--color-bg-elevated); } .tl-card-accent { width: 4px; flex: none; border-radius: 2px; } .tl-card-accent.file { background: var(--color-feature-file); } .tl-card-accent.task { background: var(--color-feature-task); } .tl-card-accent.timelog { background: var(--color-feature-timelog); } .tl-card-accent.status { background: var(--color-text-secondary); } .tl-card-body { flex: 1 1 auto; min-width: 0; } .tl-card-line1 { display: flex; align-items: center; gap: 6px; } .tl-card-line2 { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .tl-card-line3 { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .tl-card-time { margin-left: auto; flex: none; font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-card-actor { font-size: var(--font-xs); color: var(--color-text-secondary); } .tl-card-dot { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-card-size { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-kind-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--font-2xs); font-weight: 600; } .tl-kind-chip svg { width: 12px; height: 12px; flex: none; } .tl-kind-chip.file { background: var(--color-feature-file-surface); color: var(--color-feature-file); } .tl-kind-chip.timelog { background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); } .tl-file-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-file-source { flex: none; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-2xs); } .tl-card-action { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .tl-card-action:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .tl-dl-arrow { font-size: var(--font-xs); } .tl-task-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-task-status { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: 500; } .tl-work-content { margin-top: 8px; font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .tl-work-empty { margin-top: 8px; font-size: var(--font-sm); font-style: italic; color: var(--color-text-tertiary); } .tl-duration-badge { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-primary-surface); color: var(--color-feature-timelog); font-size: var(--font-xs); font-weight: 600; } .tl-status-actor { font-size: var(--font-sm); color: var(--color-text-primary); } .tl-status-kind { font-size: var(--font-xs); color: var(--color-text-secondary); } .tl-status-arrow { font-size: var(--font-xs); color: var(--color-text-tertiary); } .tl-status-value { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-primary); font-size: var(--font-xs); font-weight: 500; }   .tl-checked { display: flex; align-items: center; gap: 6px; max-width: 520px; margin: 2px 12px; padding: 6px 8px; border-radius: 6px; background: var(--color-bg-sunken); opacity: .85; cursor: pointer; } .tl-checked:hover { opacity: 1; background: var(--color-bg-elevated); } .tl-checked svg { width: 12px; height: 12px; flex: none; } .tl-checked-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--color-text-secondary); } .tl-checked-actor { font-weight: 500; }   .tl-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; background: transparent; border: 1px solid var(--color-border-default); font-size: var(--font-xs); color: var(--color-text-secondary); cursor: pointer; } .tl-filter-chip:hover { border-color: var(--color-feature-file); } .tl-filter-chip.on { background: var(--color-feature-file-surface); border-color: var(--color-feature-file); color: var(--color-feature-file); } .tl-filter-chip-count { font-weight: 600; }   .tl-chip-sep { width: 1px; align-self: stretch; margin: 4px 8px 4px 6px; background: var(--color-border-default); }   .tl-thread-group-header { padding: 8px 12px 4px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-feature-file); }   .tl-thread-attach-badge { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 10px; padding: 0 6px; height: 18px; border-radius: 9px; background: var(--color-feature-file-surface); font-size: var(--font-2xs); font-weight: 600; color: var(--color-feature-file); }   .tl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 48px 24px; } .tl-empty-icon { width: 64px; height: 64px; opacity: .5; } .tl-empty-title { margin: 16px 0 0; font-size: var(--font-md); font-weight: 600; color: var(--color-text-secondary); } .tl-empty-sub { margin: 4px 0 0; max-width: 320px; font-size: var(--font-sm); color: var(--color-text-tertiary); text-align: center; }   .tl-skeletons { padding: 8px 12px; } .tl-skeleton-card { display: flex; gap: 8px; margin: 4px 0; padding: 12px; border-radius: var(--radius-md); background: var(--color-bg-base); border: 1px solid var(--color-border-default); animation: tl-pulse 1.5s ease-in-out infinite; } .tl-skeleton-accent { width: 4px; flex: none; border-radius: 2px; background: var(--color-border-default); } .tl-skeleton-lines { flex: 1 1 auto; min-width: 0; } .tl-skeleton-rect { display: block; height: 12px; margin-bottom: 6px; border-radius: 4px; background: var(--color-border-default); } .tl-skeleton-rect.w40 { width: 40%; } .tl-skeleton-rect.w60 { width: 60%; } .tl-skeleton-rect.w80 { width: 80%; } @keyframes tl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }   .list-context-accent.message { background: var(--color-feature-message); } .list-context-count { font-size: var(--font-xs); color: var(--color-text-tertiary); } .list-context-bar.theme .list-context-name { max-width: 350px; color: var(--color-text-tertiary); } .list-context-alert { min-width: 16px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: 700; line-height: 14px; text-align: center; }   .folder-empty-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .folder-retry-btn { padding: 2px 8px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--color-border-default); color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .folder-retry-btn:hover { background: var(--color-primary-surface-light); }   .folder-project-icon { width: 12px; height: 12px; flex-shrink: 0; opacity: .7; } .folder-project-icon.dim { opacity: .35; }   .theme-sort-chips { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 6px 8px 8px; } .theme-sort-chip { height: 18px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); font-size: var(--font-2xs); line-height: 16px; cursor: pointer; } .theme-sort-chip:hover { border-color: var(--color-primary); } .theme-sort-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }   .theme-spine-head { display: flex; align-items: center; gap: 7px; margin: 10px 6px 4px 8px; font-size: var(--font-2xs); font-weight: 600; color: var(--color-text-tertiary); } .theme-spine-head::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); } .theme-spine-sep { height: 1px; margin: 4px 8px; background: var(--color-border-default); }   .theme-fav-btn { display: none; flex: none; margin-left: 6px; padding: 2px; border: none; background: transparent; cursor: pointer; line-height: 0; } .folder-item:hover > .theme-fav-btn, .theme-fav-btn.on { display: inline-flex; }   .ftm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 1200; } .ftm-dialog { min-width: 440px; max-width: 520px; border: 2px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-base); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .ftm-head { display: flex; align-items: flex-start; justify-content: space-between; margin: 24px 16px 0 28px; } .ftm-title { font-size: 14pt; font-weight: bold; color: var(--color-text-primary); } .ftm-close { background: transparent; border: none; cursor: pointer; font-size: 10pt; color: var(--color-text-secondary); padding: 2px 6px; border-radius: 4px; } .ftm-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .ftm-sub { margin: 8px 28px 0 28px; font-size: 9pt; color: var(--color-text-secondary); } .ftm-recipients { margin: 20px 28px 0 28px; padding: 6px 8px; border-radius: 8px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); } .ftm-chips { display: flex; flex-wrap: wrap; gap: 4px; } .ftm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); font-size: 9pt; color: var(--color-text-primary); } .ftm-chip-x { background: transparent; border: none; cursor: pointer; font-size: 8pt; color: var(--color-text-tertiary); padding: 0; } .ftm-chip-x:hover { color: var(--color-text-primary); } .ftm-input-wrap { position: relative; } .ftm-input { width: 100%; border: none; background: transparent; font-size: 9pt; padding: 4px 2px; outline: none; color: var(--color-text-primary); } .ftm-foot { display: flex; justify-content: flex-end; gap: 8px; margin: 24px 28px 24px 28px; } .ftm-cancel { min-height: 36px; min-width: 96px; padding: 8px 16px; border-radius: 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: 10pt; font-weight: 500; cursor: pointer; } .ftm-cancel:hover { background: var(--color-bg-sunken); } .ftm-send { min-height: 36px; min-width: 160px; padding: 8px 20px; border-radius: 8px; border: none; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 10pt; font-weight: 600; cursor: pointer; } .ftm-send:hover:not(:disabled) { background: var(--color-primary-dark); } .ftm-send:disabled { opacity: 0.55; cursor: default; }   #components-reconnect-modal { display: none !important; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected, #components-reconnect-modal[data-storage], #components-reconnect-modal[data-signin], #components-reconnect-modal[data-offline] { display: block !important; }       .compose-template-creator-reply { position: absolute; left: 12px; right: 12px; bottom: 56px; z-index: 30; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }   .sc-consent-overlay, .sc-gap-overlay { position: fixed; inset: 0; background: var(--color-overlay-black-60); z-index: var(--z-notification); display: flex; align-items: center; justify-content: center; padding: 24px 16px; outline: none; } .sc-consent-panel { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-base); border-radius: 16px; box-shadow: var(--shadow-overlay-card); } .sc-consent-header { flex-shrink: 0; padding: 22px 28px 18px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-lg); font-weight: var(--weight-semibold); } .sc-consent-body { flex: 1 1 auto; min-height: 0; max-height: 460px; overflow-y: auto; padding: 22px 28px 16px; }   .sc-consent-lead { margin: 0 0 12px; font-size: var(--font-sm); color: var(--color-text-primary); } .sc-consent-note { margin: 12px 0 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-consent-note.weak { margin-top: 10px; color: var(--color-text-tertiary); }   .sc-consent-item { display: flex; align-items: flex-start; margin-bottom: 6px; } .sc-consent-item .sc-consent-dot { flex-shrink: 0; width: 5px; height: 5px; margin: 7px 11px 0 2px; border-radius: 50%; background: var(--color-primary); } .sc-consent-item-text { font-size: var(--font-sm); color: var(--color-text-primary); } .sc-consent-item.small { margin-bottom: 3px; } .sc-consent-item.small .sc-consent-dot { width: 4px; height: 4px; margin: 6px 9px 0 2px; background: var(--color-text-tertiary); } .sc-consent-item.small .sc-consent-item-text { font-size: var(--font-xs); color: var(--color-text-secondary); }   .sc-consent-hero { margin: 0 0 16px; text-align: center; font-size: var(--font-md); font-weight: var(--weight-bold); line-height: 26px; color: var(--color-text-primary); } .sc-consent-hero-accent { color: var(--color-primary-on-surface); }   .sc-consent-preview { margin: 0 0 16px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-base); overflow: hidden; } .sc-consent-preview-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); } .sc-consent-preview-title { flex: 1 1 auto; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .sc-consent-preview-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 9999px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-bold); } .sc-consent-preview-row { display: flex; align-items: center; padding: 12px; } .sc-consent-preview-meta { flex: 1 1 auto; min-width: 0; } .sc-consent-preview-name { margin-bottom: 6px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-consent-preview-chips { display: flex; flex-wrap: wrap; } .sc-consent-chip { margin: 0 5px 0 0; padding: 2px 8px; border: 1px solid var(--color-border-default); border-radius: 9999px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .sc-consent-preview-arrow { flex-shrink: 0; margin: 0 10px; font-size: var(--font-lg); color: var(--color-text-tertiary); } .sc-consent-preview-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 9999px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-lg); display: flex; align-items: center; justify-content: center; }   .sc-consent-tr-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: var(--font-xs); } .sc-consent-tr-row + .sc-consent-tr-row { border-top: 1px solid var(--color-border-default); } .sc-consent-tr-time { flex-shrink: 0; color: var(--color-text-secondary); } .sc-consent-tr-task { flex: 1 1 auto; min-width: 0; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-consent-tr-check { flex-shrink: 0; color: var(--color-primary-on-surface); }   .sc-consent-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; } .sc-consent-benefit { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--color-bg-elevated); font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-primary); } .sc-consent-benefit-icon { flex-shrink: 0; color: var(--color-primary-on-surface); }   .sc-consent-card { padding: 14px 16px; border-radius: 12px; background: var(--color-bg-elevated); } .sc-consent-card-headline { margin-bottom: 6px; font-size: var(--font-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); } .sc-consent-card-text { margin: 0; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-consent-card-label { margin: 12px 0 6px; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-consent-card-foot { margin: 12px 0 0; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .sc-consent-footer { flex-shrink: 0; padding: 16px 28px 22px; border-top: 1px solid var(--color-border-default); } .sc-consent-check { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; cursor: pointer; } .sc-consent-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } .sc-consent-check-text { font-size: var(--font-sm); color: var(--color-text-primary); } .sc-consent-links { margin: 0 0 12px 24px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .sc-consent-link { padding: 0; border: none; background: none; font-size: var(--font-xs); color: var(--color-primary-on-surface); text-decoration: underline; cursor: pointer; } .sc-consent-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .sc-consent-decline { padding: 8px 14px; border: none; background: transparent; font-size: var(--font-sm); color: var(--color-text-tertiary); cursor: pointer; } .sc-consent-agree { padding: 10px 18px; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .sc-consent-agree:disabled { opacity: 0.45; cursor: default; }   .sc-legal-overlay { position: fixed; inset: 0; background: var(--color-overlay-black-60); display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .sc-legal-panel { width: min(640px, 100%); max-height: min(720px, 100%); display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-base); border-radius: 16px; box-shadow: var(--shadow-overlay-card); } .sc-legal-header { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--color-primary); color: var(--color-text-on-primary); } .sc-legal-title { flex: 1 1 auto; font-size: var(--font-md); font-weight: var(--weight-semibold); } .sc-legal-close { flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--color-overlay-white-22); color: var(--color-text-on-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .sc-legal-close:hover { background: var(--color-overlay-white-40); } .sc-legal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 28px 24px; font-size: var(--font-sm); line-height: 20px; color: var(--color-text-secondary); } .sc-legal-body h2, .sc-legal-body h3, .sc-legal-body h4 { margin: 14px 0 4px; font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sc-legal-body h2 { font-size: var(--font-lg); margin-top: 4px; } .sc-legal-body h3 { font-size: var(--font-md); } .sc-legal-body h4 { font-size: var(--font-sm); margin-top: 10px; } .sc-legal-body p { margin: 0 0 2px; } .sc-legal-body ul { margin: 0 0 2px; padding-left: 16px; } .sc-legal-body li { margin-bottom: 3px; }   .sc-gap-panel { width: min(580px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-base); border-radius: 16px; box-shadow: var(--shadow-overlay-card); }   .sc-gap-header { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 22px 28px 18px; background: var(--color-primary); color: var(--color-text-on-primary); } .sc-gap-header-icon { display: inline-flex; align-items: center; color: var(--color-white); } .sc-gap-title { flex: 1 1 auto; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); }   .sc-gap-snooze { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; border: 0; cursor: pointer; color: var(--color-text-on-primary); font-size: var(--font-xs); opacity: 0.85; } .sc-gap-snooze:hover { opacity: 1; }   .sc-gap-body { flex: 1 1 auto; min-height: 0; max-height: 460px; overflow-y: auto; padding: 22px 28px 20px; }   .sc-gap-card { display: flex; flex-direction: column; align-items: center; border-radius: 10px; padding: 14px 18px; border: 1px solid var(--color-border-default); background: var(--color-bg-sunken); } .sc-gap-times { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } .sc-gap-time-col { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; } .sc-gap-time-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .sc-gap-time-value { margin-top: 4px; font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sc-gap-arrow { margin: 8px 8px 0; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); }   .sc-gap-badge { margin-top: 12px; padding: 4px 12px; border-radius: 12px; background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-semibold); }   .sc-gap-explain { margin: 16px 0 0; color: var(--color-text-secondary); font-size: var(--font-sm); line-height: 1.6; }   .sc-gap-footer { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--color-border-default); }   .sc-gap-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: var(--font-sm); cursor: pointer; } .sc-gap-secondary:hover { background: var(--color-bg-sunken); }     .sc-session-alert { position: fixed; top: calc(var(--topbar-height) + 8px); right: 16px; width: 320px; max-width: calc(100vw - 32px); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-text-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08); z-index: var(--z-toast); overflow: hidden; animation: toast-in 0.35s var(--ease-spring), sc-session-alert-fade 5s linear 0.35s forwards;   pointer-events: none; } .sc-session-alert-close { pointer-events: auto; } @keyframes sc-session-alert-fade { 0%, 40% { opacity: 1; } 100% { opacity: 0; } } .sc-session-alert-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0 14px; } .sc-session-alert-lead { flex: 1 1 auto; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-session-alert-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; } .sc-session-alert-close:hover { background: var(--color-bg-sunken); } .sc-session-alert-body { display: flex; align-items: center; gap: 12px; padding: 8px 14px 12px; } .sc-session-alert-avatar { flex: 0 0 auto; } .sc-session-alert-fields { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline; } .sc-session-alert-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .sc-session-alert-value { min-width: 0; font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-session-alert-value.strong { font-weight: var(--weight-bold); }   .sb-blocked-note[hidden] { display: none !important; } .sb-blocked-note { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 1199;   width: max-content; max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: var(--radius-full); background: var(--color-text-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-lg); } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .sb-blocked-note { bottom: 96px; border-radius: var(--radius-lg); } }   html.sp-waking::after { content: ''; position: fixed; left: 0; top: 0; height: 3px; width: 40%; z-index: 2147483600; background: var(--color-primary); pointer-events: none; animation: sp-wake-bar 1s ease-in-out infinite; } @keyframes sp-wake-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } 
/*css/screens/23-guest.css*/
  .guest-shell { background: var(--color-bg-sunken); } .guest-body { display: flex; flex: 1; min-height: 0; } .guest-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px; }   .guest-nav { border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }   .guest-space-initial, .guest-theme-initial, .guest-avatar { display: inline-grid; place-items: center; flex-shrink: 0; color: #fff; font-weight: var(--weight-bold); } .guest-space-initial { width: 24px; height: 24px; border-radius: 8px; background: var(--color-overlay-white-20); font-size: 12px; }   .guest-badge { background: var(--color-bg-base); color: var(--color-text-secondary); border-radius: 9px; padding: 1px 8px; font-size: 12px; font-weight: var(--weight-bold); } .guest-me-name { color: #fff; font-size: 12px; } .guest-back { margin-left: 10px; border: 1px solid var(--color-overlay-white-20); background: transparent; color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-family: inherit; cursor: pointer; } .guest-back:hover { background: var(--color-overlay-white-20); }   .guest-avatar { width: 26px; height: 26px; border-radius: 4px; font-size: 12px; } .guest-theme-initial { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; } .guest-theme-initial.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }   .guest-heading { margin: 0 0 12px; font-size: 15px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .guest-muted { color: var(--color-text-tertiary); font-size: 12px; } .guest-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guest-empty { color: var(--color-text-secondary); font-size: 13px; } .guest-center { margin-top: 40px; text-align: center; } .guest-btn-sm { padding: 3px 12px; font-size: 12px; } .guest-section-label { padding: 10px 12px 6px; color: var(--color-text-tertiary); font-size: 12px; } .guest-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: var(--color-error-surface); color: var(--color-text-primary); font-size: 13px; }     .guest-home-themes { padding: var(--space-3) var(--space-4); } .guest-cards { display: flex; flex-wrap: wrap; gap: 12px; } .guest-card { display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: 100%; padding: 12px 14px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); cursor: pointer; } .guest-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .guest-card-head { display: flex; align-items: center; gap: 10px; } .guest-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-size: 13px; font-weight: var(--weight-bold); } .guest-card-latest { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-default); color: var(--color-text-primary); font-size: 13px; } .guest-card-latest-text { min-width: 0; } .guest-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .guest-chip-deadline { padding: 1px 8px; border-radius: 9px; background: var(--color-warning-surface); color: var(--color-warning-badge); font-size: 12px; }   .guest-messages { display: grid; grid-template-columns: 200px 300px 1fr; min-height: 480px; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .guest-col { min-width: 0; overflow-y: auto; border-right: 1px solid var(--color-border-default); } .guest-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--color-text-primary); font-size: 13px; cursor: pointer; } .guest-row.selected, .guest-msg-row.selected { background: var(--color-primary-surface); } .guest-msg-row { padding: 9px 12px; border-top: 1px solid var(--color-border-default); cursor: pointer; } .guest-msg-line1 { display: flex; align-items: center; gap: 6px; } .guest-msg-line1 time { margin-left: auto; } .guest-msg-subject { margin-top: 2px; color: var(--color-text-primary); font-size: 13px; } .guest-msg-row.unread .guest-msg-subject { font-weight: var(--weight-bold); } .guest-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--color-error); } .guest-load-more { margin: 8px 12px; } .guest-reader { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; } .guest-reader-body { flex: 1; overflow-y: auto; } .guest-reader-subject { margin: 0 0 10px; color: var(--color-text-primary); font-size: 15px; font-weight: var(--weight-bold); } .guest-bubble { max-width: 620px; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-sunken); } .guest-bubble-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-primary); font-size: 13px; } .guest-reply { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); } .guest-reply-text { box-sizing: border-box; width: 100%; min-height: 60px; max-height: 200px; resize: vertical; font: inherit; font-size: 13px; } .guest-reply-error { margin-top: 6px; color: var(--color-error); font-size: 12px; } .guest-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }   .guest-cabinet { overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); } .guest-cabinet-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-border-default); } .guest-cabinet-bar select { width: 260px; max-width: 100%; } .guest-table-wrap { overflow-x: auto; padding: 0 12px 8px; } .guest-table { width: 100%; border-collapse: collapse; color: var(--color-text-primary); font-size: 13px; } .guest-table th { padding: 8px 0 4px; text-align: left; color: var(--color-text-tertiary); font-size: 12px; font-weight: normal; } .guest-table td { padding: 8px 0; border-top: 1px solid var(--color-border-default); } .guest-num { white-space: nowrap; color: var(--color-text-secondary); font-size: 12px; } .guest-ext { display: inline-block; min-width: 30px; margin-right: 8px; padding: 2px 4px; border-radius: 4px; background: var(--color-bg-sunken); text-align: center; color: var(--color-text-secondary); font-size: 10px; font-weight: var(--weight-bold); }   .guest-clip { display: inline-flex; color: var(--color-text-tertiary); margin-left: auto; } .guest-msg-line1 .guest-clip + time { margin-left: 6px; } .guest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .guest-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-secondary); font: inherit; font-size: 12px; } .guest-chip-link { cursor: pointer; } .guest-chip-link:hover { background: var(--color-primary-surface); } .guest-chip-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); } .guest-chip-remove { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .guest-reply-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .guest-attach { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }   .guest-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .guest-doc-row { cursor: pointer; } .guest-doc-row:hover td { background: var(--color-primary-surface); } .guest-opening { margin-left: 8px; }   @media (max-width: 900px) { .guest-messages { grid-template-columns: 1fr; } .guest-col { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--color-border-default); } }   @media (max-width: 768px) { .guest-home-themes .guest-card { width: 100%; } } 
/*css/screens/24-activity.css*/
  .act-page { position: relative;   background: var(--color-bg-base); width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 20px 48px; outline: none; } .act-page-title { margin: 0 0 12px; font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); }   .act-toolbar { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--color-border-default); } .act-segment { display: inline-flex; margin-right: 8px; border: 1px solid var(--color-border-default); border-radius: 6px; overflow: hidden; } .act-segment-btn { padding: 3px 8px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-secondary); } .act-segment-btn.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .act-nav-btn { padding: 4px 8px; border: 0; background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .act-date-label { text-align: center; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .act-summary { display: flex; justify-content: center; gap: 16px; min-height: 16px; padding: 8px 12px; background: var(--color-bg-sunken); font-size: var(--font-xs); } .act-summary-work { color: var(--color-primary-on-surface); } .act-summary-away { color: var(--color-text-tertiary); } .act-summary-unreg { color: var(--color-warning); } .act-summary-count { color: var(--color-text-secondary); } .act-content { position: relative; min-height: 240px; } .act-loading { padding: 80px 0; text-align: center; font-size: var(--font-sm); color: var(--color-text-secondary); } .act-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 0; } .act-empty svg { margin-bottom: 12px; } .act-empty-title { font-size: var(--font-md); color: var(--color-text-secondary); } .act-empty-sub { margin-top: 4px; font-size: var(--font-sm); color: var(--color-text-tertiary); }   .act-timebar { position: relative; margin: 8px 16px 0; } .act-hour { position: absolute; left: 0; right: 0; height: 0; } .act-hour::after { content: ""; position: absolute; left: 45px; right: 0; top: 0; border-top: 0.5px solid var(--color-border-default); } .act-hour-label { position: absolute; left: 0; top: -6px; font-size: 10px; line-height: 12px; color: var(--color-text-tertiary); } .act-block { position: absolute; left: 50px; right: 60px; box-sizing: border-box; border-radius: 3px; cursor: default; }   .act-block.registered { background: var(--color-primary); opacity: 0.85; cursor: pointer; } .act-block.unreg-activity { background: var(--color-warning); opacity: 0.25; cursor: pointer; } .act-block.unreg-empty { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); opacity: 0.5; cursor: pointer; } .act-block.away { background: var(--color-text-tertiary); opacity: 0.15; } .act-block.idle { background: var(--color-bg-sunken); opacity: 0.3; } .act-block.flash { outline: 2px solid var(--color-primary); outline-offset: -2px; animation: act-flash 0.2s ease-in-out 4 alternate; } @keyframes act-flash { from { opacity: 1; } to { opacity: 0.6; } } .act-block-label { display: block; margin: 2px 4px 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--color-text-secondary); } .act-block.registered .act-block-label { color: #fff; } .act-block.away .act-block-label { font-size: 10px; color: var(--color-text-tertiary); } .act-block.unreg-activity .act-block-label { font-size: 10px; color: var(--color-warning); } .act-block-dots { position: absolute; right: 0; width: 56px; display: flex; gap: 4px; font-size: 12px; line-height: 1; } .act-block-more { font-size: 9px; color: var(--color-text-tertiary); padding-top: 2px; } .act-now-line { position: absolute; left: 45px; right: 0; border-top: 1.5px solid var(--color-error); }   .act-log { margin-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--color-border-default); } .act-log-header { display: flex; align-items: center; justify-content: space-between; margin: 8px 16px 4px; } .act-log-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .act-log-filter { width: 160px; font-size: var(--font-xs); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); } .act-log-row { display: grid; grid-template-columns: 4px 45px 24px 1fr; align-items: center; padding: 6px 16px; cursor: pointer; } .act-log-row:hover { background: var(--color-primary-surface-light); } .act-log-row.flash { outline: 2px solid var(--color-primary); outline-offset: -2px; animation: act-flash 0.2s ease-in-out 4 alternate; } .act-log-bar { width: 3px; align-self: stretch; margin: 1px 0; border-radius: 1.5px; } .act-log-time { margin-left: 8px; font-size: 11px; color: var(--color-text-tertiary); } .act-log-icon { display: flex; justify-content: center; } .act-log-text { margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--color-text-primary); }   .act-heatmap { margin: 10px 16px 16px; } .act-heatmap-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .act-heatmap-sub { margin: 2px 0 8px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .act-heatmap-grid { display: flex; flex-direction: column; } .act-heatmap-row { display: grid; grid-template-columns: auto repeat(24, 1fr); align-items: center; } .act-heatmap-date { min-width: 64px; margin-right: 6px; font-size: 9px; color: var(--color-text-tertiary); } .act-heatmap-date.today { font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .act-heatmap-hour { margin: 0 0 2px 1px; font-size: 9px; color: var(--color-text-tertiary); white-space: nowrap; overflow: visible; } .act-heat-cell { height: 13px; margin: 1px 0 0 1px; border-radius: 2px; cursor: pointer; background: var(--color-bg-sunken); } .act-heat-cell.lv1 { background: color-mix(in srgb, var(--color-primary) 20%, transparent); } .act-heat-cell.lv2 { background: color-mix(in srgb, var(--color-primary) 40%, transparent); } .act-heat-cell.lv3 { background: color-mix(in srgb, var(--color-primary) 70%, transparent); } .act-heat-cell.lv4 { background: var(--color-primary); } .act-heatmap-legend { display: flex; align-items: center; gap: 2px; margin-top: 10px; font-size: 9px; color: var(--color-text-tertiary); } .act-heatmap-legend .act-heat-cell { width: 13px; margin: 0 1px; cursor: default; } .act-heatmap-hint { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .act-heatmap-empty { margin-top: 16px; text-align: center; font-size: var(--font-sm); color: var(--color-text-tertiary); }   .act-popup-scrim, .act-menu-scrim { position: fixed; inset: 0; z-index: 90; } .act-popup { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 91; min-width: 280px; max-width: 360px; padding: 12px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: var(--shadow-lg); } .act-popup-title { margin-bottom: 8px; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .act-popup-sep { margin-bottom: 8px; border-bottom: 1px solid var(--color-border-default); } .act-popup-list { max-height: 180px; overflow-y: auto; } .act-popup-row { display: grid; grid-template-columns: 40px 22px 1fr; align-items: center; padding: 2px 0; } .act-popup-row .act-log-time { margin-left: 0; } .act-popup-row .act-log-text { margin-left: 4px; } .act-popup-none { margin: 4px 0; font-size: 12px; color: var(--color-text-tertiary); } .act-popup-ai { margin-top: 8px; padding: 6px 8px; border-radius: 4px; background: var(--color-primary-surface); } .act-popup-ai-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .act-popup-ai-text { margin-top: 2px; font-size: var(--font-sm); color: var(--color-text-primary); } .act-popup-actions { display: flex; justify-content: space-between; margin-top: 12px; } .act-popup-close { padding: 6px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); } .act-popup-register { padding: 6px 12px; border: 0; border-radius: var(--radius-sm); background: var(--color-primary); cursor: pointer; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: #fff; }   .act-menu { position: fixed; z-index: 91; min-width: 180px; padding: 4px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: var(--shadow-md); } .act-menu-item { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; font-size: var(--font-sm); color: var(--color-text-primary); } .act-menu-item:hover { background: var(--color-primary-surface-light); } 
/*css/screens/25-agent-config.css*/
    .sc-card.ag-host { width: 520px; border: 1px solid var(--color-border-default); overflow: hidden; } .ag-panel { display: flex; flex-direction: column; max-height: calc(100vh - 40px); background: var(--color-bg-base); position: relative; }   .ag-header { height: 48px; display: flex; align-items: center; gap: var(--space-2); padding: 0 12px 0 16px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .ag-header-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .ag-header-spacer { flex: 1; } .ag-header-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: var(--color-text-secondary); cursor: pointer; } .ag-header-icon-btn:hover { background: var(--color-bg-sunken); } .ag-copy-btn { width: 22px; height: 22px; margin-left: var(--space-1); color: var(--color-text-tertiary); }   .ag-status-pill { padding: 2px 8px; border-radius: 10px; font-size: var(--font-2xs); font-weight: 600; background: var(--color-bg-sunken); color: var(--color-text-tertiary); white-space: nowrap; } .ag-status-pill.is-on { background: var(--color-success-surface); color: var(--color-success); }   .ag-menu-anchor { position: relative; display: inline-flex; } .ag-menu-dismiss { position: fixed; inset: 0; z-index: 20; } .ag-menu { position: absolute; top: 34px; right: 0; z-index: 21; min-width: 180px; padding: var(--space-1); background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 6px; box-shadow: var(--shadow-md); } .ag-menu-item { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border: none; background: transparent; font-size: var(--font-xs); color: var(--color-text-primary); text-align: left; cursor: pointer; border-radius: 4px; } .ag-menu-item:hover { background: var(--color-bg-sunken); } .ag-menu-item.is-danger svg { color: var(--color-error); }   .ag-tabs { display: flex; padding-left: 16px; background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .ag-tab { height: 40px; padding: 0 16px; border: none; border-bottom: 3px solid transparent; background: transparent; font-size: var(--font-sm); font-weight: 500; color: var(--color-text-secondary); cursor: pointer; } .ag-tab:hover { color: var(--color-text-primary); } .ag-tab.is-on { color: var(--color-primary-dark); font-weight: 600; border-bottom-color: var(--color-primary); }   .ag-hero { display: flex; align-items: center; padding: 16px 20px; background: var(--color-primary-surface-light); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .ag-hero-body { min-width: 0; } .ag-hero-name-row { display: flex; align-items: center; gap: var(--space-2); } .ag-hero-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-lg); font-weight: 600; color: var(--color-text-primary); } .ag-hero-meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 3px; } .ag-hero-address { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .ag-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-primary-surface); cursor: pointer; } .ag-avatar-64 { width: 64px; height: 64px; margin-right: 14px; } .ag-avatar-56 { width: 56px; height: 56px; margin-right: 12px; } .ag-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ag-avatar-emoji { line-height: 1; }   .ag-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--color-bg-sunken); } .ag-body-inner { padding: 20px 20px 24px; }   .ag-card { position: relative; margin-bottom: 16px; padding: 20px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .ag-card.is-sunken { background: var(--color-bg-sunken); border-color: transparent; }   .ag-rail-card { display: flex; padding: 0; overflow: hidden; } .ag-rail { width: 3px; flex-shrink: 0; background: var(--color-primary); } .ag-rail-body { flex: 1; min-width: 0; padding: 20px; } .ag-section-head { margin-bottom: 12px; } .ag-section-head-gap { margin-bottom: 14px; } .ag-title-with-icon { display: inline-flex; align-items: center; } .ag-section-icon { margin-right: 7px; color: var(--color-text-tertiary); flex-shrink: 0; } .ag-section-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .ag-lead-title { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .ag-rail-body > .ag-lead-title { display: block; margin-bottom: 10px; } .ag-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ag-wrap { display: flex; flex-wrap: wrap; } .ag-gap-top { margin-top: 14px; } .ag-gap-bottom { margin-bottom: 8px; }   .ag-field-label { margin-bottom: 6px; font-size: var(--font-2xs); font-weight: 500; color: var(--color-text-secondary); } .ag-help { margin-top: 6px; font-size: var(--font-2xs); line-height: 17px; color: var(--color-text-tertiary); white-space: pre-line; } .ag-help-top { margin-top: 0; margin-bottom: 8px; } .ag-note { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ag-note.is-error { color: var(--color-error); } .ag-error { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-error); white-space: normal; word-break: break-word; } .ag-error-center { margin-bottom: 8px; text-align: center; font-size: var(--font-2xs); color: var(--color-error); }   .ag-input, .ag-textarea, .ag-select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); font-family: inherit; } .ag-input:focus, .ag-textarea:focus, .ag-select:focus { outline: none; border-color: var(--color-primary); } .ag-input.is-invalid, .ag-textarea.is-invalid, .ag-stepper-box.is-invalid { border-color: var(--color-error); } .ag-textarea { resize: vertical; } .ag-textarea::placeholder, .ag-input::placeholder { color: var(--color-text-disabled); } .ag-ask { min-height: 76px; max-height: 160px; } .ag-prompt { min-height: 240px; max-height: 500px; font-family: "Cascadia Code", Consolas, "Yu Gothic UI", Meiryo, monospace; } .ag-rail-body > .ag-row { margin-top: 8px; }   .ag-link { padding: 0; border: none; background: transparent; color: var(--color-primary-dark); font-size: var(--font-2xs); text-decoration: underline; cursor: pointer; white-space: nowrap; } .ag-link-block { display: block; margin-top: 4px; }   .ag-small-btn, .ag-primary-btn { border: none; border-radius: 8px; background: var(--color-primary); color: var(--color-text-on-primary); font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .ag-small-btn { height: 26px; padding: 0 10px; font-size: var(--font-2xs); } .ag-small-btn:hover, .ag-primary-btn:hover { background: var(--color-primary-dark); } .ag-small-btn:disabled, .ag-primary-btn:disabled { background: var(--color-border-muted); cursor: default; } .ag-small-btn.is-danger { background: var(--color-error); } .ag-small-btn.is-danger:hover { opacity: 0.88; } .ag-primary-btn { height: 30px; padding: 0 14px; font-size: var(--font-xs); }   .ag-quiet-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 6px 12px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .ag-quiet-btn:hover { background: var(--color-bg-sunken); }   .ag-band { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--color-error); border-radius: var(--radius-md); background: var(--color-error-surface); } .ag-band.is-warning { border-color: var(--color-warning); background: var(--color-warning-surface); } .ag-band-text { flex: 1; min-width: 0; } .ag-band-title { font-size: var(--font-xs); font-weight: 600; color: var(--color-error); } .ag-band-title.is-warning { color: var(--color-warning-on-surface); } .ag-band-detail { margin-top: 2px; font-size: var(--font-2xs); line-height: 16px; color: var(--color-text-secondary); } .ag-newtools { margin-bottom: 10px; } .ag-warning-btn { padding: 4px 10px; border: none; border-radius: 6px; background: var(--color-warning); color: var(--color-bg-base); font-size: var(--font-2xs); font-weight: 500; cursor: pointer; flex-shrink: 0; } .ag-warning-btn:hover { opacity: 0.85; }   .ag-or { display: flex; align-items: center; margin: 12px 0 8px; } .ag-or-line { flex: 1; height: 1px; background: var(--color-border-default); } .ag-or-text { margin: 0 10px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .ag-small-pill { height: 26px; margin: 0 6px 6px 0; padding: 0 11px; 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; } .ag-small-pill:hover { background: var(--color-bg-sunken); } .ag-small-pill.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 600; }   .ag-small-pill.is-dashed { border-style: dashed; color: var(--color-text-tertiary); font-weight: 400; } .ag-small-pill.is-dashed.is-on { color: var(--color-primary-dark); }   .ag-pill { height: 32px; min-width: 80px; margin: 0 8px 8px 0; padding: 0 14px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .ag-pill:hover { background: var(--color-bg-sunken); } .ag-pill.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-dark); }   .ag-receipt { margin-bottom: 12px; padding: 14px; border: 1px solid var(--color-ai-assist-border); border-radius: var(--radius-md); background: var(--color-ai-assist-surface); } .ag-receipt > .ag-row { margin-bottom: 6px; justify-content: flex-start; } .ag-receipt-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); margin-right: auto; } .ag-receipt-source { font-size: var(--font-3xs); font-weight: 600; color: var(--color-ai-assist-accent); }   .ag-sentence { font-size: var(--font-sm); line-height: 24px; color: var(--color-text-primary); } .ag-sentence.is-lead { font-size: var(--font-md); line-height: 26px; } .ag-seg-value { padding: 0 4px; border-radius: 3px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-sm); font-weight: 600; }   .ag-chips { margin-top: 14px; } .ag-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 11px; border: 1px solid var(--color-border-default); border-radius: 13px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .ag-chip-icon { color: var(--color-text-tertiary); }   .ag-quote { margin-top: 10px; padding: 2px 0 2px 10px; border-left: 2px solid var(--color-border-muted); font-size: var(--font-2xs); line-height: 19px; color: var(--color-text-secondary); } .ag-quote-link { margin-left: 4px; color: var(--color-primary-dark); }   .ag-who { display: flex; align-items: flex-start; } .ag-who-body { flex: 1; min-width: 0; }   .ag-recent-label { margin-top: 2px; } .ag-recent-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--color-border-default); } .ag-recent-row:last-child { border-bottom: none; } .ag-recent-when { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ag-recent-what { margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-2xs); color: var(--color-text-primary); } .ag-log-pill { padding: 1px 6px; border-radius: 8px; background: var(--color-bg-sunken); color: var(--color-text-tertiary); font-size: var(--font-3xs); font-weight: 600; } .ag-log-pill.is-pending { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .ag-log-pill.is-done { background: var(--color-success-surface); color: var(--color-success); } .ag-log-pill.is-error { background: var(--color-error-surface); color: var(--color-error); }   .ag-check { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .ag-cron-row { justify-content: flex-start; margin-top: 12px; } .ag-cron-block { margin-top: 8px; } .ag-previous { align-items: center; gap: 6px; margin-top: 6px; }   .ag-scope { border: 1px solid var(--color-border-default); border-radius: 6px; overflow: hidden; } .ag-scope-row { width: 100%; display: flex; align-items: flex-start; padding: 12px 14px; border: none; border-bottom: 1px solid var(--color-border-default); background: transparent; text-align: left; cursor: pointer; } .ag-scope-row:last-child { border-bottom: none; } .ag-scope-row.is-on { background: var(--color-primary-surface); } .ag-scope-mark { width: 14px; height: 14px; flex-shrink: 0; margin: 2px 10px 0 0; border: 1.5px solid var(--color-border-muted); border-radius: 50%; box-sizing: border-box; } .ag-scope-row.is-on .ag-scope-mark { border-color: var(--color-primary); background: var(--color-primary); } .ag-scope-text { display: flex; flex-direction: column; } .ag-row-title { font-size: var(--font-xs); font-weight: 500; color: var(--color-text-primary); } .ag-row-desc { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ag-mode { margin-top: 12px; } .ag-mode.is-stepped { margin-top: 0; }   .ag-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-left: 2px solid transparent; border-radius: 6px; } .ag-switch-row.is-on { background: var(--color-primary-surface-light); border-left-color: var(--color-primary); } .ag-switch-text { min-width: 0; }   .ag-switch { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; margin: 0; flex-shrink: 0; border-radius: 10px; background: var(--color-border-muted); cursor: pointer; transition: background 0.15s; } .ag-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 7px; background: var(--color-bg-base); box-shadow: var(--shadow-sm); transition: transform 0.15s; } .ag-switch:checked { background: var(--color-primary); } .ag-switch:checked::after { transform: translateX(14px); }   .ag-pill-select { height: 26px; min-width: 110px; padding: 0 11px; border: 1px solid var(--color-primary); border-radius: 13px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-2xs); font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; } .ag-pill-select:hover { background: var(--color-primary-surface-muted); } .ag-pill-select:disabled { opacity: 0.5; cursor: default; }   .ag-picker-panel { margin-top: 12px; } .ag-tool-category { margin: 8px 0 6px; font-size: var(--font-2xs); font-weight: 500; color: var(--color-text-tertiary); } .ag-tool-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 6px 6px 0; padding: 0 12px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; box-sizing: border-box; } .ag-tool-pill:hover { background: var(--color-bg-sunken); } .ag-tool-pill.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-dark); } .ag-tool-pill input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .ag-tool-check { color: var(--color-primary-dark); } .ag-new-badge { padding: 1px 4px; border-radius: 4px; background: var(--color-warning); color: var(--color-text-on-primary); font-size: var(--font-3xs); font-weight: 700; }   .ag-finetune { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border-default); } .ag-finetune-head { list-style: none; font-size: var(--font-2xs); color: var(--color-text-secondary); cursor: pointer; } .ag-finetune-head::-webkit-details-marker { display: none; } .ag-finetune-head::before { content: "▸"; margin-right: 6px; color: var(--color-text-tertiary); } .ag-finetune[open] > .ag-finetune-head::before { content: "▾"; } .ag-finetune-body { margin-top: 10px; }   .ag-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .ag-stepper-btn { width: 28px; height: 28px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-base); cursor: pointer; } .ag-stepper-btn:hover { background: var(--color-bg-sunken); }   .ag-stepper-btn:active { background: var(--color-border-default); } .ag-stepper-box { flex: 1; display: flex; align-items: center; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-base); } .ag-stepper-input { flex: 1; min-width: 0; padding: 6px 8px; border: none; background: transparent; color: var(--color-text-primary); text-align: center; font-size: var(--font-xs); } .ag-stepper-input:focus { outline: none; } .ag-stepper-unit { margin-right: 10px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .ag-folder-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 4px 4px 10px; border: 1px solid var(--color-primary); border-radius: 14px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: var(--font-2xs); } .ag-folder-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-folder-remove { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--color-primary-dark); cursor: pointer; } .ag-folder-remove:hover { background: var(--color-primary-muted); } .ag-add-path { margin-bottom: 8px; }   .ag-log-table { width: 100%; max-height: 260px; border-collapse: collapse; border: 1px solid var(--color-border-default); font-size: var(--font-2xs); } .ag-log-table th, .ag-log-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border-default); text-align: left; } .ag-log-table td { color: var(--color-text-primary); } .ag-log-table th { font-weight: 500; color: var(--color-text-secondary); } .ag-log-table tbody tr:nth-child(even) { background: var(--color-bg-sunken); } .ag-log-table tr.is-openable { cursor: pointer; }   .ag-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--color-bg-base); border-top: 1px solid var(--color-border-default); flex-shrink: 0; } .ag-footer-note { flex: 1; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ag-savebar { padding: 10px 16px; box-shadow: var(--shadow-sm); } .ag-savebar-note { flex: 1; font-size: var(--font-2xs); color: var(--color-warning-dark); }   .ag-picker-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45);   } .ag-picker-card { display: flex; flex-direction: column; width: 100%; max-width: 380px; max-height: 560px; margin: 16px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: var(--shadow-overlay-card); } .ag-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); } .ag-picker-title { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .ag-picker-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 12px; overflow-y: auto; } .ag-picker-cell { width: 48px; height: 48px; margin: 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 3px solid transparent; border-radius: var(--radius-sm); cursor: pointer; } .ag-picker-cell.is-on { border-color: var(--color-primary); } .ag-picker-sep { width: 320px; height: 1px; margin: 8px 0; background: var(--color-border-default); } .ag-picker-foot { padding: 12px 16px; border-top: 1px solid var(--color-border-default); text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .ag-approval { margin: 8px 0 12px; padding: 16px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .ag-approval-title { margin-bottom: 12px; font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); } .ag-approval-row { margin-bottom: 8px; font-size: var(--font-xs); color: var(--color-text-primary); } .ag-approval-key { margin-bottom: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); } .ag-approval-row .ag-approval-key { margin-bottom: 0; } .ag-approval-strong { font-weight: 600; } .ag-approval-subject { margin-bottom: 8px; font-size: var(--font-xs); color: var(--color-text-primary); } .ag-approval-sep { margin: 4px 0 8px; border: none; border-top: 1px solid var(--color-border-default); } .ag-approval-body { min-height: 120px; max-height: 200px; padding: 8px; } .ag-approval-reason { min-height: 60px; padding: 8px; margin-bottom: 8px; } .ag-approval-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .ag-approval-buttons .ag-quiet-btn { margin-right: 0; } @media (max-width: 600px) { .sc-card.ag-host { width: 100%; } .ag-hero-name { max-width: 200px; } } 
/*css/screens/26-connect.css*/
  .connect-page { max-width: 1040px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; } .connect-hero { background: var(--connect-hero-bg); border-radius: 18px; padding: 28px 32px; } .connect-hero h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--connect-hero-fg); text-wrap: balance; } .connect-hero p { margin: 10px 0 0; max-width: 640px; font-size: 13px; line-height: 1.7; color: var(--connect-hero-muted); } .connect-pillars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .connect-pillar { font-size: 12px; font-weight: 600; border-radius: 14px; padding: 5px 13px; border: 1.2px solid var(--connect-hero-muted); color: var(--connect-hero-fg); } .connect-pillar.done { border-color: transparent; background: var(--connect-done-bg); color: var(--connect-done-fg); } .connect-broken { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--color-warning, #F59E0B); border-radius: 10px; background: var(--color-bg-elevated); font-size: 12.5px; } .connect-broken span { flex: 1; min-width: 0; } .connect-load-note { margin: 12px 4px 0; font-size: 12px; color: var(--color-text-tertiary); } .connect-lane-head { display: flex; align-items: center; gap: 10px; margin: 26px 4px 0; } .connect-lane-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text-primary); } .connect-lane-badge { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 9px; background: var(--connect-done-bg); color: var(--connect-done-fg); } .connect-lane-note { margin: 4px 4px 0; font-size: 12px; color: var(--color-text-secondary); } .connect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; } .connect-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; } .connect-card.done { border-color: var(--connect-done-fg); } .connect-glyph { width: 40px; height: 40px; border-radius: 10px; background: var(--connect-glyph-bg); display: inline-flex; align-items: center; justify-content: center; } .connect-card h3 { margin: 10px 0 0; font-size: 14.5px; font-weight: 700; color: var(--color-text-primary); text-wrap: balance; } .connect-card p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); flex: 1; } .connect-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } .connect-chip { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 3px 9px; border: 1px solid var(--color-border-default); color: var(--color-text-tertiary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connect-chip.ok { border-color: transparent; background: var(--connect-done-bg); color: var(--connect-done-fg); } .connect-chip.warn { border-color: var(--color-warning, #F59E0B); color: var(--color-warning, #F59E0B); } .connect-ask-note { margin: 8px 0 0; font-size: 11.5px; color: var(--connect-done-fg); } .connect-footer-note { margin: 26px 4px 0; font-size: 12px; text-align: center; color: var(--color-text-tertiary); }   .cj-card { display: flex; gap: 18px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; } .cj-pillars { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .cj-pillar { border: 1.5px solid var(--color-border-default); border-radius: 12px; padding: 10px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); } .cj-pillar .cj-pic { display: block; font-size: 18px; } .cj-pillar.done { border-color: transparent; background: var(--connect-done-bg); color: var(--connect-done-fg); } .cj-made { border: 1px dashed var(--color-border-default); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; } .cj-made b { font-size: 10.5px; letter-spacing: .1em; color: var(--color-text-tertiary); font-weight: 600; } .cj-made span { color: var(--connect-done-fg); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cj-body { flex: 1; min-width: 0; } .cj-body h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text-primary); } .cj-sub { margin: 2px 0 10px; font-size: 11.5px; color: var(--color-text-tertiary); } .cj-bubble { max-width: 560px; border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; line-height: 1.6; color: var(--color-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; } .cj-bubble.ai { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); } .cj-bubble.me { background: var(--connect-done-bg); margin-left: auto; } .cj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cj-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 12px; border: 1.5px solid var(--color-border-default); background: var(--color-bg-elevated); color: var(--color-text-secondary); cursor: pointer; } .cj-chip.on { border-color: var(--color-primary); color: var(--connect-done-fg); background: var(--connect-done-bg); } .cj-note { margin: 8px 0 0; font-size: 11.5px; color: var(--color-text-tertiary); } .cj-input { width: 100%; margin-top: 6px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-elevated); color: var(--color-text-primary); padding: 8px 10px; font-size: 13px; resize: vertical; box-sizing: border-box; } .cj-create { margin-top: 8px; } @media (max-width: 640px) { .cj-card { flex-direction: column; } .cj-pillars { width: 100%; flex-direction: row; flex-wrap: wrap; } .cj-pillar { flex: 1; min-width: 100px; } .cj-made { width: 100%; } }   html.dark { --connect-brand2: #5FE0AE; --connect-hero-muted: #8FBCA9; --connect-done-bg: #1B332A; --connect-done-fg: #4BD99F; } @media (max-width: 640px) { .connect-page { padding: 12px 16px 40px; } .connect-hero { padding: 22px 20px; } .connect-hero h1 { font-size: 21px; } .connect-grid { grid-template-columns: 1fr; } } 
/*css/screens/30-mobile-shell.css*/
    @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .app-layout { height: 100vh; height: 100dvh; }     :root { --topbar-height: 52px;   --mobile-nav-height: 64px;   --font-3xs: 11px;   --font-2xs: 13px;   --font-xs: 15px;   --font-sm: 16px;   --font-base: 17px;   --font-md: 18px;   --font-lg: 20px;   --font-xl: 24px;   --font-2xl: 28px;   --font-3xl: 36px;   }   :root:has(.app-layout.has-native-tabbar) { --mobile-nav-height: 0px; } .app-layout.has-native-tabbar .persona-fr-overlay { padding-bottom: calc(12px + var(--host-bottom-inset, 0px)); } .app-topbar { height: var(--topbar-height); gap: 10px; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .app-topbar .btn-hamburger { display: flex; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; padding: 0; border-radius: 20px; flex: 0 0 auto; } .app-topbar .btn-hamburger span { width: 20px; height: 2px; } .app-topbar .topbar-title { display: none; } .app-topbar .topbar-screen-title { display: block; flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: var(--weight-bold); color: var(--color-text-on-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { min-width: 0; gap: 10px; } .app-topbar .topbar-qr-wrap, .app-topbar .topbar-help-pill, .app-topbar .topbar-timerecord-pill, .app-topbar .topbar-status-dot, .toast-center-bell { display: none; } .app-topbar .btn-notification-bell { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; position: relative; } .app-topbar .btn-notification-bell svg { width: 22px; height: 22px; }   .app-topbar .vf-entry { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; flex-shrink: 0; } .app-topbar .vf-entry-t { display: none; } .app-topbar .vf-entry-ic, .app-topbar .vf-entry-ic svg { width: 20px; height: 20px; }   .app-topbar .topbar-settings-pill { width: 44px; height: 44px; margin-right: 0; padding: 0; justify-content: center; border-radius: 50%; flex-shrink: 0; } .app-topbar .topbar-settings-pill > span { display: none; } .app-topbar .topbar-settings-pill .topbar-pill-icon { width: 20px; height: 20px; } .app-topbar .notif-badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; font-size: 11px; font-weight: var(--weight-bold); line-height: 18px; text-align: center; }   .sidebar .nav-mobile-extras { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border-default); } .nav-mobile-extras-title { padding: 6px 8px; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-text-tertiary); letter-spacing: 0.08em; } .nav-mobile-extra { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); font-size: 16px; text-align: left; cursor: pointer; } .nav-mobile-extra:active { background: var(--color-bg-sunken); } .nav-mobile-extra-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-primary-dark); } .nav-mobile-extra-q { display: grid; place-items: center; border: 1.8px solid currentColor; border-radius: 50%; font-size: 13px; font-weight: var(--weight-bold); }   .main-content > * { animation-fill-mode: none; }   .main-content, .ta-reserve .main-content, .sb-reserve .main-content { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }   .mobile-bottom-nav { height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }   .mobile-bottom-nav .bottom-nav-item { flex: 1; min-height: 56px; font-size: 11px; gap: 2px; } .mobile-bottom-nav .bottom-nav-item svg { width: 24px; height: 24px; }   } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .slide-over-panel, .slide-over-panel.wide { width: 100vw !important; height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom)); }   body:has(.slide-over-panel.open) .slide-over-panel, body:has(.slide-over-panel.open) .slide-over-panel.wide { height: calc(100vh - var(--topbar-height)); height: calc(100dvh - var(--topbar-height)); }   body:has(.slide-over-panel.open) .compose-panel.m-full .compose-bottom-menu { padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .ai-panel, .home-rateinfo-overlay { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); } .ai-panel { width: 100vw; max-width: 100vw; left: 0; right: 0; } .home-rateinfo-panel { width: 100vw; max-width: 100vw; }   body .cwd-fab { bottom: calc(72px + env(safe-area-inset-bottom)) !important; right: 8px !important; width: 36px !important; height: 36px !important;   opacity: 0.55; } body .cwd-fab:active, body .cwd-fab:focus-visible { opacity: 1; } body .cwd-fab svg { width: 18px; height: 18px; }   body:has(.mobile-new-message-fab) .cwd-fab, body:has(.tr-fab) .cwd-fab { right: auto !important; left: 8px !important; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .app-topbar { position: relative; } .app-topbar .global-search-wrap { display: block; position: static; margin: 0; } .app-topbar .global-search-input-wrap { position: relative; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 20px; border-color: transparent; background: transparent; } .app-topbar .global-search-input-wrap:not(:focus-within) .global-search-icon { width: 22px; height: 22px; color: var(--color-text-on-primary); } .app-topbar .global-search-input-wrap .global-search-input { position: absolute; inset: 0; width: 100%;   font-size: 16px;   } .app-topbar .global-search-input-wrap:not(:focus-within) .global-search-input { color: transparent; caret-color: transparent; background: transparent; border: 0; } .app-topbar .global-search-input-wrap:not(:focus-within) .global-search-input::placeholder { color: transparent; }     .app-topbar .global-search-input-wrap:not(.is-open) .global-search-open { display: block; position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }   .app-topbar .global-search-input-wrap:not(.is-open) .global-search-open::after { content: ""; position: absolute; inset: -3px; } .app-topbar .global-search-input-wrap:not(.is-open):not(:focus-within) .global-search-input { visibility: hidden; } .app-topbar .global-search-input-wrap .global-search-hint, .app-topbar .global-search-input-wrap .global-search-clear { display: none; } .app-topbar .global-search-input-wrap:focus-within { position: absolute; top: 6px; left: 12px; right: 12px; width: auto; height: 40px; border-radius: 20px; padding: 0 12px; gap: 8px; justify-content: flex-start; z-index: 5;   } .app-topbar .global-search-input-wrap:focus-within .global-search-input { position: static; } .app-topbar .global-search-input-wrap:focus-within .global-search-clear { display: flex; }   .app-topbar .global-search-results { left: 8px; right: 8px; top: calc(100% + 4px); max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 16px); overflow-y: auto; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .confirm-dialog { padding: 22px 20px 18px; max-height: calc(100dvh - 32px); overflow-y: auto; } .confirm-actions { flex-wrap: wrap; } .confirm-actions .confirm-cancel, .confirm-actions .confirm-ok { flex: 1 1 auto; min-height: 44px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .modal-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 24px); top: calc(var(--topbar-height) + (100dvh - var(--topbar-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom)) / 2); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .toast-item:not(.toast-incoming) { min-width: 0; max-width: none; padding: 12px 14px; } .toast-item:not(.toast-incoming) > .toast-body { flex: 1 1 auto; min-width: 0; }   .toast-item:not(.toast-incoming) .toast-kind { display: block; min-height: 40px; padding-right: 180px; } .toast-item:not(.toast-incoming) > .toast-action, .toast-item:not(.toast-incoming) > .toast-close { position: absolute; top: 4px; width: 44px; height: 44px; } .toast-item:not(.toast-incoming) > .toast-close { right: 4px; } .toast-item:not(.toast-incoming) > .toast-pin { right: 48px; } .toast-item:not(.toast-incoming) > .toast-action[data-testid="ToastSnoozeButton"] { right: 92px; } .toast-item:not(.toast-incoming) > .toast-action[data-testid="ToastCopyButton"] { right: 136px; } .toast-ctas { flex-wrap: wrap; } .toast-cta { white-space: nowrap; min-height: 44px; } .toast-mute { min-height: 44px; } .geo-prompt-btn { min-height: 44px; }   .modal-dialog { top: calc(50% - var(--host-bottom-inset, 0px) / 2); max-height: calc(100dvh - 32px - var(--host-bottom-inset, 0px)); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .sc-session-alert { top: auto; right: 12px; left: 12px; width: auto; max-width: none; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .sp-tooltip { display: none !important; } .sidebar.mobile-open { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }   .mile-flyout { width: min(320px, calc(100vw - 16px)); left: max(8px, min(calc(var(--sidebar-width) + 8px), calc(100vw - min(320px, calc(100vw - 16px)) - 8px))); } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), textarea, select, [contenteditable="true"], [contenteditable=""] { font-size: max(16px, 1em) !important; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .kbd-only, .theme-filter-keyhint, .todo-esc-hint { display: none !important; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .slide-over-pin { display: none !important; } .slide-over-panel:has(.ios-navbar) > .slide-over-header { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .toast-center-panel { width: calc(100% - 56px); padding-bottom: env(safe-area-inset-bottom); } .toast-center-header { padding-top: max(16px, env(safe-area-inset-top)); } } 
/*css/screens/31-mobile-home.css*/
      .home-schedule-mlist { display: none; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .home-header { flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px 8px; } .home-header-text { flex: 1 1 calc(100% - 56px); } .home-header-title { font-size: var(--font-lg); line-height: 1.35; overflow-wrap: anywhere; } .home-header-greeting { font-size: var(--font-xs); line-height: 1.5; } .home-header-date { margin-left: 0; font-size: var(--font-xs); }   .home-today-shipping-link { flex: 1 1 auto; margin: 0; padding: 10px 0; font-size: var(--font-xs); } .home-persona-seg-item { padding: 9px 12px; font-size: var(--font-sm); } .home-header-settings-btn { width: 40px; height: 40px; } .home-persona-seg + .home-header-settings-btn { margin-left: auto; }   .persona-coach-bubble { width: min(280px, calc(100vw - 32px)); } .persona-coach-ok { min-height: 40px; padding: 8px 16px; }   .home-welcome { margin: 12px 16px 16px; padding: 20px 16px; } .home-welcome-title { font-size: var(--font-xl); } .home-welcome-actions { flex-wrap: wrap; } .home-welcome-actions .btn-sm { min-height: 40px; } .home-setup-guide { gap: 10px; margin: 12px 16px 0; padding: 14px 12px 14px 14px; } .setup-guide-icon { width: 32px; height: 32px; } .setup-guide-icon svg { width: 18px; height: 18px; } .setup-guide-content { min-width: 0; padding-right: 28px; }   .setup-step { flex-wrap: wrap; row-gap: 6px; } .setup-step-text { flex: 1 1 calc(100% - 34px); min-width: 0; } .setup-step .btn-primary { min-height: 40px; margin-left: 34px; } .setup-guide-dismiss { top: 4px; right: 4px; width: 40px; height: 40px; }   .home-discovery-head { margin: 12px 16px 6px; } .home-discovery-head-title, .home-discovery-openall { font-size: var(--font-xs); } .home-discovery-openall { margin-right: 0; padding: 10px 0; } .home-discovery-rail { gap: 8px; margin: 0 16px 16px; } .home-discovery-card { height: auto; min-height: 48px; padding: 6px 4px 6px 10px; }   .home-discovery-title { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   .home-discovery-pin { opacity: 0.45; padding: 10px 6px; }   .home-today-row { gap: 12px; margin: 0 16px 12px; } .home-schedule-head { gap: 6px 8px; padding: 10px 12px 8px; } .home-schedule-icon-wrap { min-height: 36px; } .home-schedule-step-btn, .home-schedule-fullwidth-btn { width: 36px; height: 36px; font-size: var(--font-md); } .home-schedule-step-label { min-width: 0; } .home-schedule-today-btn { height: 36px; } .home-schedule-seg-btn { min-height: 32px; padding: 6px 14px; font-size: var(--font-sm); } .home-schedule-calendar-link { min-height: 36px; font-size: var(--font-sm); } .home-schedule-empty { margin: 24px 16px 28px; } .home-schedule-empty-primary { min-height: 40px; } .home-schedule-empty-secondary { min-height: 40px; font-size: var(--font-xs); } .home-schedule-band { margin-left: 12px; } .home-triage-card { padding: 12px; } .home-triage-next { min-height: 0; margin: 4px 0 16px; } .home-triage-next-body { padding: 14px 14px 14px 12px; } .home-triage-next-row2 { gap: 10px; } .home-triage-avatar { width: 40px; height: 40px; flex-basis: 40px; } .home-triage-next-title { font-size: var(--font-md); overflow-wrap: anywhere; } .home-triage-btn-primary, .home-triage-btn-icon, .home-triage-undo-btn { min-height: 40px; }   .home-triage-snooze { display: flex; width: 100%; min-width: 0; } .home-triage-snooze > button { min-height: 40px; } .home-triage-snooze-custom { flex-wrap: wrap; } .home-triage-snooze-custom > span { white-space: nowrap; }   .home-triage-snooze-custom input { flex: 1 1 140px; width: auto; min-width: 0; min-height: 40px; font-size: 16px; } .home-triage-snooze-custom button { min-height: 40px; min-width: 48px; }   .home-triage-row { flex-wrap: wrap; min-height: 44px; row-gap: 4px; } .home-triage-row-title { flex: 1 1 0; font-size: var(--font-sm); } .home-triage-badge { flex-shrink: 0; white-space: nowrap; } .home-triage-row-meta { flex: 0 1 auto; min-width: 0; max-width: 32%; overflow: hidden; text-overflow: ellipsis; }   .home-triage-row-actions { flex-basis: 100%; gap: 8px; padding-left: 30px; } .home-triage-row-btn-primary, .home-triage-row-btn { min-height: 36px; padding: 6px 12px; font-size: var(--font-xs); } .home-triage-expand { padding: 10px 0; font-size: var(--font-sm); }   .home-section-heading { padding: 0 16px; } .home-section-wrap { padding: 0 16px 12px; } .home-card { padding: 2px 0; } .home-card-header { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px 8px; }   .home-card-title { flex: 1 0 auto; white-space: nowrap; } .home-card-body { padding: 8px 14px 14px; } .home-plan-badge, .home-sub-action-btn { white-space: nowrap; } .home-sub-action-btn { min-height: 36px; font-size: var(--font-sm); } .home-plan-change-btn { min-height: 40px; } .home-card-body .btn-sm { min-height: 40px; }   .home-mile-legend-btn { width: 36px; height: 36px; } .home-mile-legend-btn svg { width: 20px; height: 20px; } .home-mile-legend-anchor { margin-left: 0; } .home-mile-legend-popup { max-width: calc(100vw - 32px); } .home-member-viewtoggle { gap: 4px; margin-left: 0; } .home-member-viewbtn { width: 40px; height: 36px; } .home-member-menu-item { min-height: 40px; font-size: var(--font-sm); } .home-member-cards { grid-template-columns: minmax(0, 1fr); }   .home-member-row { flex-wrap: wrap; row-gap: 4px; padding: 10px 2px; } .home-member-info { flex: 1 1 calc(100% - 44px); } .home-member-row .home-member-row-mile { margin-left: 42px; } .home-member-state { margin-left: auto; white-space: nowrap; } .home-member-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; padding: 4px 0 0; font-size: var(--font-sm); } .home-member-toggle input[type="checkbox"] { width: 20px; height: 20px; }   .home-branch-grid { gap: 8px; } .home-branch-card { flex: 1 1 140px; justify-content: center; min-height: 44px; } .home-branch-expander { padding: 10px 0; } .home-activity-row { gap: 10px; }   .home-footer-links { gap: 0 4px; padding: 12px 12px 16px; } .home-footer-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px; font-size: var(--font-sm); } .home-footer-powered { margin-top: 4px; }   .home-dash-setting-item { min-height: 40px; margin-bottom: 0; font-size: var(--font-sm); } .home-dash-setting-item input[type="checkbox"] { width: 20px; height: 20px; } .home-dash-setting-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }   .home-mailroom-card, .home-receipt-panel, .home-mailset-panel, .home-mailact, .home-minitour, .home-mailsample, .home-mailrecent-card { margin-left: 16px; margin-right: 16px; } .home-mailcta-row { gap: 10px; margin: 12px 16px; } .home-mailrecent-head, .home-mailsample-lead { margin-left: 16px; margin-right: 16px; } .home-mailrecent-head { margin-top: 8px; } .home-mailroom-card { padding: 16px 14px; } .home-mailroom-chip { min-height: 40px; font-size: var(--font-xs); } .home-mailroom-counts { margin-top: 16px; } .home-mailroom-num { font-size: 36px; } .home-mailroom-label { justify-content: center; min-height: 44px; } .home-mailroom-label-link, .home-mailroom-label-sub { font-size: var(--font-xs); } .home-mailroom-flowhint { font-size: var(--font-2xs); line-height: 1.5; } .home-mailroom-failpill { padding: 8px 12px; } .home-mailcta { padding: 14px; } .home-mailcta-desc { font-size: var(--font-xs); } .home-mailcta-btn { min-height: 44px; }   .home-receipt-head { flex-wrap: wrap; row-gap: 0; padding: 8px 8px 4px 14px; } .home-receipt-title, .home-receipt-sub { font-size: var(--font-xs); } .home-receipt-close { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; font-size: var(--font-xs); } .home-receipt-tabs { gap: 16px; padding: 0 14px; overflow-x: auto; } .home-receipt-tab { flex-shrink: 0; padding: 10px 2px; font-size: var(--font-xs); white-space: nowrap; } .home-receipt-row { min-height: 44px; padding: 8px 12px 8px 14px; } .home-receipt-date { width: 82px; font-size: var(--font-2xs); } .home-receipt-file { font-size: var(--font-xs); } .home-receipt-to { max-width: 72px; } .home-receipt-openhub { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--font-xs); }   .home-mailset-head { flex-wrap: wrap; min-height: 48px; row-gap: 2px; padding: 8px 14px; } .home-mailset-title, .home-mailset-sub { font-size: var(--font-xs); } .home-mailset-row { padding: 10px 14px; } .home-mailset-key { width: 104px; } .home-mailset-val { font-size: var(--font-sm); } .home-mailset-change { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; font-size: var(--font-xs); }   .home-mailrecent-card { flex-wrap: wrap; row-gap: 6px; } .home-mailrecent-body { flex: 1 1 calc(100% - 56px); } .home-mailrecent-pill, .home-mailrecent-new { flex-shrink: 0; white-space: nowrap; } .home-mailrecent-subject { font-size: var(--font-sm); } .home-mailrecent-done, .home-mailrecent-status { margin-left: 56px; max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .home-mailact { padding: 14px; } .home-mailact-step { flex-wrap: wrap; row-gap: 8px; } .home-mailact-text { flex: 1 1 calc(100% - 35px); } .home-mailact-step > button { min-height: 40px; margin-left: 35px; } .home-mailact-tourlink { min-height: 40px; display: inline-flex; align-items: center; font-size: var(--font-xs); } .home-mailsample-state { white-space: nowrap; }   .home-minitour { max-width: none; } .home-minitour-body { font-size: var(--font-xs); } .home-minitour-close, .home-minitour-next { min-height: 40px; padding: 8px 14px; }   .persona-fr-overlay { top: var(--topbar-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); align-items: flex-start; padding: 12px; } .persona-fr-sheet { margin: auto 0; border-radius: 18px; } .persona-fr-hero-body { padding: 18px 18px 16px; } .persona-fr-title { font-size: var(--font-lg); } .persona-fr-body { padding: 12px 12px 14px; } .persona-fr-choices { gap: 10px; } .persona-fr-head { padding: 12px 44px 12px 12px; } .persona-fr-art { margin-right: 10px; } .persona-fr-lines { padding: 10px 12px 12px; } .persona-fr-line { margin-bottom: 5px; } .persona-fr-card-title { font-size: var(--font-base); } .persona-fr-card-desc, .persona-fr-line-text, .persona-fr-assurance-text { font-size: var(--font-xs); } .persona-fr-skip { flex: 1 1 100%; padding: 8px 0; font-size: var(--font-xs); } .persona-fr-start { flex: 1 1 100%; min-height: 44px; font-size: var(--font-base); }   .ucs-overlay { top: calc(var(--topbar-height) + 12px); transform: translateX(-50%); width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height) - 24px); max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 24px - env(safe-area-inset-bottom)); } .ucs-overlay-close { width: 40px; height: 40px; } .ucs-manager-host { grid-template-columns: minmax(0, 1fr); place-items: stretch; align-content: start; padding: 10px; } .ucs-config-backdrop { margin: -10px; } .ucs-manager { padding: 8px 14px 12px; } .ucs-manager-close, .ucs-config-close, .ucs-config-delete { width: 40px; height: 40px; } .ucs-manager-heading-text { font-size: var(--font-lg); } .ucs-manager-item { width: 100%; height: auto; min-height: 44px; } .ucs-manager-actions .btn-primary { min-height: 40px; } .ucs-config { align-self: start; width: 100%; } .ucs-config-head-text { padding: 6px 14px 4px; } .ucs-config-body { padding: 6px 14px 10px; } .ucs-config-label { margin-top: 14px; } .ucs-config-input { height: 40px; font-size: 16px; } .ucs-config-footer { margin: 16px 0 6px; } .ucs-config-footer .btn-primary { min-width: 88px; min-height: 40px; }   .login-card { width: 100%; } .login-form-inner { padding: 24px 20px; } .login-select { min-height: 44px; font-size: 16px; }   .space-selector { padding: 18px 16px 16px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {       .home-dashboard > .home-header { justify-content: flex-end; padding: 10px 16px 0; } .home-dashboard > .home-header > :not(.home-persona-seg) { display: none; }     .home-dashboard > * { order: 6; flex-shrink: 0; }   .home-dashboard > .home-header { order: 0; } .home-dashboard > .home-m-ask { order: 1; } .home-dashboard > .home-m { order: 1; } .home-dashboard > .home-m-todos { order: 2; } .home-dashboard > .home-today-row { order: 3; } .home-dashboard > .home-discovery-head { order: 4; } .home-dashboard > .home-discovery-rail { order: 5; }   .home-dashboard > .home-footer-links { order: 7; } .home-dashboard { display: flex; flex-direction: column; }   .home-schedule-card .home-schedule-step-btn, .home-schedule-card .home-schedule-today-btn, .home-schedule-card .home-schedule-fullwidth-btn, .home-schedule-card .home-schedule-seg, .home-schedule-card .home-schedule-timeline, .home-schedule-card .home-schedule-week-grid { display: none; } .home-schedule-card .home-schedule-step-label { font-weight: 700; }   .home-today-row .home-schedule-card { min-height: 72px;   overflow: visible; } .home-today-row .home-schedule-head { padding: 8px 12px 4px; }   .home-schedule-card .home-schedule-band { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }   .home-schedule-mlist { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 10px; }   .home-schedule-mrow { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; padding: 0 8px; border-left: 3px solid var(--color-border-muted); border-radius: 0 6px 6px 0; background: var(--color-bg-sunken); font-size: 12px; color: var(--color-text-primary); }   .home-schedule-mrow .home-schedule-gbadge { background: var(--color-bg-base); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } .home-schedule-mrow-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); } .home-schedule-mrow-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .home-today-row .home-triage-slot:not(.m-shown) { display: none; }   .home-m-ask { display: flex; flex-direction: column; gap: 10px; margin: 12px 16px 0; padding: 14px 14px 12px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-base); } .home-m-ask-head { display: flex; align-items: flex-start; gap: 8px; } .home-m-ask-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: var(--weight-bold); line-height: 1.4; color: var(--color-text-primary); }   .home-m-ask-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-tertiary); } .home-m-ask-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); } .home-m-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }   .home-m-ask-btn { flex: 1 1 140px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-primary); border-radius: 12px; background: var(--color-bg-base); color: var(--color-primary-dark); font-size: 14px; font-weight: var(--weight-bold); } .home-m-ask-link { flex: 1 1 100%; min-height: 40px; padding: 6px 8px; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 13px; text-decoration: underline; } .home-m { display: flex; flex-direction: column; gap: 14px; padding: 16px; }   .home-m-todos { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }   .home-m-me { display: flex; align-items: center; gap: 10px; } .home-m-me-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 15px; font-weight: var(--weight-bold); } .home-m-me-tx { display: flex; flex-direction: column; min-width: 0; } .home-m-me-name { font-size: 16px; font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: 1.35; } .home-m-sub { font-size: 12.5px; color: var(--color-text-tertiary); line-height: 1.35; }       .home-m-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 16px; background: var(--color-bg-base); }   .home-m-svc > .home-m-svc-t:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; } .home-m-svc > .home-m-svc-t:last-child:nth-child(odd) .home-m-svc-sub:empty { display: none; } .home-m-svc > .home-m-svc-t:last-child:nth-child(odd) .home-m-svc-sub { margin-left: 0; } .home-m-svc-t { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; } .home-m-svc-ic { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-sunken); color: var(--color-text-secondary); }   .home-m-svc-ic.tone-unchecked { background: var(--color-primary-surface); color: var(--color-primary-on-surface);   } .home-m-svc-ic.tone-expired { background: var(--color-error-surface); color: var(--color-error-on-surface); }   .home-m-svc-bd { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border: 2px solid var(--color-bg-base); border-radius: 10px; background: var(--color-primary-badge); color: var(--color-text-on-primary); font-size: 11.5px; font-weight: var(--weight-bold); line-height: 1; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .home-m-svc-bd.is-alert { background: var(--color-error-dark); } .home-m-svc-lb { min-width: 0; font-size: 14px; color: var(--color-text-primary); overflow: hidden;   overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }   .home-m-svc-sub { margin-left: auto; min-height: 12px; font-size: 10.5px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; line-height: 1; }   .home-m-feed-hd { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; font-size: 13px; letter-spacing: .04em; color: var(--color-text-tertiary); } .home-m-remaining { padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--color-text-tertiary); } .home-m-empty { padding: 18px 2px; font-size: 15px; color: var(--color-text-tertiary); }   .home-fc { position: relative;   min-height: 144px; display: flex; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 14px; overflow: hidden; }   .home-fc.is-top { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }   .home-fc-main { flex: 1 1 auto; min-width: 0;   overflow: hidden; display: flex; flex-direction: column; padding: 14px 0 14px 14px; border: 0; background: transparent; text-align: left; } .home-fc-who { flex: 0 0 auto; min-height: 32px; display: flex; align-items: center; gap: 8px; min-width: 0; } .home-fc-av { position: relative; flex: 0 0 32px; width: 32px; height: 32px; line-height: 1; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-primary-surface); color: var(--color-primary-on-surface);   font-size: 14px; font-weight: var(--weight-bold); }   .home-fc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .home-fc-nx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .home-fc-name { font-size: 14px; font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .home-fc-kind { font-size: 11px; line-height: 1.2; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-fc-age { flex: 0 0 auto; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-text-tertiary); white-space: nowrap; padding-right: 2px; } .home-fc-age.red { color: var(--color-error); } .home-fc-age.amber { color: var(--color-warning); } .home-fc-subject { flex: 0 0 auto; min-height: 24px; margin-top: 8px; font-size: 16px; font-weight: var(--weight-bold); line-height: 1.5; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }   .home-fc-excerpt { flex: 0 0 auto;   height: 2.96em; margin-top: 4px; font-size: 13.5px; line-height: 1.48; color: var(--color-text-secondary); padding-right: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   .home-fc-more { flex: 0 0 44px; width: 44px; border: 0; border-left: 1px solid var(--color-border-subtle, #eef0f3); background: transparent; color: var(--color-text-tertiary); font-size: 20px; line-height: 1;   display: flex; align-items: center; justify-content: center; overflow: hidden; } .home-fc-menu { position: absolute; right: 8px; bottom: 8px; z-index: 30; min-width: 180px; display: flex; flex-direction: column; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 18, 24, .16); overflow: hidden; } .home-fc-menu button { padding: 13px 16px; border: 0; border-top: 1px solid var(--color-border-subtle, #eef0f3); background: transparent; text-align: left; font-size: 15px; color: var(--color-text-primary); } .home-fc-menu button:first-child { border-top: 0; } .home-m-feed-more { height: 48px; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-elevated); font-size: 14px; color: var(--color-text-secondary); }   } 
/*css/screens/32-mobile-talk.css*/
    @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .folder-panel, .folder-panel.collapsed { top: var(--topbar-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); left: -320px; width: min(300px, 85vw); } .folder-panel.mobile-open, .folder-panel.collapsed.mobile-open { left: 0; } .folder-panel .folder-name { width: auto; flex: 1 1 auto; min-width: 0; } .folder-panel .folder-item { min-height: 44px; } .folder-panel .theme-sort-chip { min-height: 32px; }   .btn-folder-toggle { width: 40px; height: 40px; }   .talk-layout input[type="text"], .talk-layout input[type="search"], .talk-layout input:not([type]), .talk-layout input[type="date"], .talk-layout input[type="datetime-local"], .talk-layout input[type="number"], .talk-layout textarea, .talk-layout select, .compose-panel input[type="text"], .compose-panel input:not([type]), .compose-panel textarea, .compose-panel select, .mf-panel input, .mf-panel select, .folder-search-input, .compact-reply-input, .compose-textarea, .compose-panel .compose-textarea, .compose-panel .compose-subject-input, .compose-panel .inline-recipient-input { font-size: 16px; } .compact-reply-input::placeholder { font-size: 15px; }   .btn-mobile-back { min-height: 44px; }     .quote-header { flex-wrap: wrap; }   .quote-hover-bar:not(.is-hidden) { position: static; order: 10; flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 2px; opacity: 1; visibility: visible; background: transparent; border: none; box-shadow: none; }   .quote-hover-bar .btn-quote-action.hover-only { display: none; } .quote-hover-bar .btn-quote-action.hover-only.btn-quote-more { display: inline-flex; opacity: 0.8; visibility: visible; }   .quote-system-header .quote-system-more { min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0; justify-content: center; }   .quote-add-contact { width: 24px; height: 24px; background: transparent; border: 1px solid var(--color-border-default); color: var(--color-primary-on-surface); }   .fcb-all-checked-compact { display: none; }   .theme-files-entry { display: none; } .quote-search-fab { display: none; } .quote-hover-bar .btn-quote-action { width: 36px; height: 36px; justify-content: center; } .quote-hover-bar .btn-quote-action.btn-quote-task { width: auto; } .quote-check-mark { min-width: 28px; min-height: 28px; }   .html-mail-toolbar { flex-wrap: wrap; gap: 6px; align-items: center; } .html-mail-toolbar > * { flex: 0 0 auto; min-width: 0; }   .html-mail-toolbar .ext-img-msg { display: none; } .html-mail-toolbar .ext-img-mini { font-size: var(--font-2xs); color: var(--color-warning); font-weight: var(--weight-semibold); white-space: nowrap; }   .html-mail-toolbar .html-mail-acts { display: none; } .html-mail-toolbar.acts-open .html-mail-acts { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 6px; } .html-mail-toolbar .html-mail-more { margin-left: auto; min-width: 32px; min-height: 32px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-sm); line-height: 1; padding: 0 8px; } .html-mail-toolbar.acts-open .html-mail-more { background: var(--color-bg-sunken); } .html-mail-imgbtn { min-height: 32px; white-space: nowrap; }   .inhouse-quote-list .quote-item.html-wide, .inhouse-quote-list .quote-item:has(.fb-card) { max-width: 100%; } .inhouse-quote-list .quote-item.html-wide .quote-body-row, .inhouse-quote-list .quote-item:has(.fb-card) .quote-body-row {   margin-left: -42px; flex-basis: calc(100% + 42px);   max-width: none; } .inhouse-quote-list .quote-item.html-wide .quote-body-border, .inhouse-quote-list .quote-item:has(.fb-card) .quote-body-border { max-width: 100%; padding-left: 8px; padding-right: 8px; }   .fb-dark-row.fb-dark-mailbody { flex-direction: column; gap: 4px; } .fb-dark-row.fb-dark-mailbody .fb-dark-label { min-width: 0; } .fb-dark-row.fb-dark-mailbody .fb-dark-value { position: relative; max-height: calc(var(--leading-normal) * 3em); overflow: hidden; } .fb-dark-row.fb-dark-mailbody.is-open .fb-dark-value { max-height: none; overflow: visible; }   .fb-dark-row.fb-dark-mailbody:not(.is-open) .fb-dark-value::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--fb-dark-card-bg)); pointer-events: none; }     .fb-actions { display: flex; align-items: center; gap: 9px; } .fb-actions .fb-btn-primary { flex: 1 1 auto; } .fb-more-summary { min-width: 48px; min-height: 48px; border-radius: 12px; font-size: var(--font-lg); } .fb-more-menu { min-width: 220px; } .fb-actions .fb-btn-primary, .fb-actions .fb-btn-outline, .fb-actions .fb-hub-link { min-height: 48px; border-radius: 12px;   padding: 6px 10px; font-size: var(--font-sm); text-align: center; }   .fb-card { box-shadow: 0 1px 3px rgba(20, 24, 22, .07); }   .fb-dark-mailbody-toggle { margin: 2px 0 6px; color: var(--fb-dark-card-link); }   .fb-dark-value { overflow-wrap: anywhere; }   .quote-ctx-menu { left: 8px !important; right: 8px; top: auto !important; bottom: calc(64px + env(safe-area-inset-bottom)); min-width: 0; max-height: 60vh; } .quote-ctx-menu button { min-height: 44px; font-size: var(--font-md); }   .quote-hover-bar .reaction-picker-popover { left: auto; right: 0; width: max-content; max-width: calc(100vw - 24px); flex-wrap: wrap; } .quote-hover-bar .reaction-picker-emoji, .tl-msg-react .reaction-picker-emoji { min-width: 40px; min-height: 40px; }   .account-popup.account-popup-enhanced { left: 16px; right: 16px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); transform: none; min-width: 0; max-width: none; max-height: calc(100dvh - var(--topbar-height) - 96px); overflow-y: auto; } .account-popup-enhanced .btn-popup-action { min-height: 44px; }   .quote-neglect-nudge { flex-wrap: nowrap; align-items: center; } .quote-neglect-nudge .qnn-text { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quote-neglect-nudge .qnn-action { flex: 0 0 auto; margin-left: auto; min-height: 32px; }   .compose-compact-bar { min-height: 44px; gap: 2px; } .compose-compact-bar:has(.compact-type-btn) { flex-wrap: wrap; padding: 2px 4px; } .compose-compact-bar:has(.compact-type-btn) .compact-reply-input { order: -1; flex: 1 0 100%; min-height: 36px; } .compose-compact-bar .btn-compose-tool, .compose-compact-bar .compact-type-btn { min-width: 36px; height: 36px; } .compose-compact-bar .btn-compose-tool.compact-ai-btn { height: 36px; } .compose-compact-bar .compact-sep { margin-left: auto; } .compact-send-btn { width: 36px; height: 36px; margin-left: auto; }     .message-detail-panel.composing-split .compose-split-bottom:not(.compact) { position: fixed; top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; z-index: 1300; height: auto !important; max-height: none; display: flex; flex-direction: column; background: var(--color-bg-base); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }     html:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)), body:has(.message-detail-panel.composing-split .compose-split-bottom:not(.compact)) { overflow: hidden; height: 100%; } .compose-split-bottom:not(.compact) .compose-panel, .compose-panel.m-full { display: flex; flex-direction: column; height: 100%; min-height: 0; }   .compose-split-bottom:not(.compact) .compose-panel, .compose-panel.m-full, .compose-split-bottom:not(.compact) .compose-body-border, .compose-panel.m-full .compose-body-border { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--color-bg-base); }   .compose-split-bottom:not(.compact) .compose-card-header, .compose-panel.m-full .compose-card-header { order: -4; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; border: 0; min-height: 48px; } .compose-split-bottom:not(.compact) .compose-card-header .btn-compose-tool[aria-label="Esc"], .compose-panel.m-full .compose-card-header .btn-compose-tool[aria-label="Esc"] { order: -1; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; background: var(--color-bg-sunken, #f1f1f6); color: var(--color-text-primary); display: inline-flex; align-items: center; justify-content: center; }   .compose-split-bottom:not(.compact) .compose-card-header .btn-compose-tool[aria-label="2カラムモードで編集"], .compose-panel.m-full .compose-card-header .btn-compose-tool[aria-label="2カラムモードで編集"] { display: none; } .compose-split-bottom:not(.compact) .compose-card-header .compose-type-badge, .compose-panel.m-full .compose-card-header .compose-type-badge { font-size: var(--font-xs); padding: 3px 9px; }   .compose-split-bottom:not(.compact) .compose-theme-row, .compose-panel.m-full .compose-theme-row { order: -2; display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 40px; border-bottom: 1px solid var(--color-border-subtle, #f1f1f6); background: var(--color-bg-base); } .compose-split-bottom:not(.compact) .compose-theme-row::before, .compose-panel.m-full .compose-theme-row::before { content: "テーマ:"; color: var(--color-text-tertiary); font-size: var(--font-sm); flex: 0 0 auto; }   .compose-split-bottom:not(.compact) .compose-panel:has(.compose-inline-recipients) .compose-theme-row, .compose-panel.m-full:has(.compose-inline-recipients) .compose-theme-row { display: none; } .compose-split-bottom:not(.compact) .compose-details-section, .compose-panel.m-full .compose-details-section { order: -1; flex: 0 0 auto; position: relative;   display: flex;   flex-direction: column; margin: 0; border: 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; background: var(--color-bg-base); padding: 0; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row, .compose-panel.m-full .compose-details-section .detail-field-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; min-height: 40px; border-bottom: 1px solid var(--color-border-subtle, #f1f1f6); } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-label, .compose-panel.m-full .compose-details-section .detail-field-label { flex: 0 0 auto; color: var(--color-text-tertiary); margin: 0; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-input, .compose-panel.m-full .compose-details-section .detail-field-input, .compose-split-bottom:not(.compact) .compose-details-section .detail-recipient-input, .compose-panel.m-full .compose-details-section .detail-recipient-input, .compose-split-bottom:not(.compact) .compose-details-section .sender-select, .compose-panel.m-full .compose-details-section .sender-select { border: 0; background: transparent; padding: 0; min-height: 28px; font-size: 16px; width: 100%; min-width: 0; flex: 1 1 80px; color: var(--color-text-primary); }   .compose-split-bottom:not(.compact) .compose-details-section .detail-recipient-input::placeholder, .compose-panel.m-full .compose-details-section .detail-recipient-input::placeholder, .compose-split-bottom:not(.compact) .compose-details-section .compose-subject-multiline::placeholder, .compose-panel.m-full .compose-details-section .compose-subject-multiline::placeholder { color: transparent; } .compose-split-bottom:not(.compact) .compose-details-section .inline-autocomplete-wrapper, .compose-panel.m-full .compose-details-section .inline-autocomplete-wrapper { flex: 1 1 80px; min-width: 0; display: flex; position: static; } .compose-split-bottom:not(.compact) .compose-details-section .compose-subject-multiline, .compose-panel.m-full .compose-details-section .compose-subject-multiline { resize: none; line-height: 1.35; }   .compose-split-bottom:not(.compact) .compose-details-section .recipient-tag, .compose-panel.m-full .compose-details-section .recipient-tag { border: 0; background: var(--color-info-surface, #e8f0fe); color: var(--color-info, #1a56db); padding: 3px 9px; border-radius: 999px; font-size: var(--font-sm); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-label, .compose-panel.m-full .compose-details-section .detail-field-label { font-size: 0; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-label::before { font-size: var(--font-sm); color: var(--color-text-tertiary); content: ""; }   .compose-split-bottom:not(.compact) .compose-details-section .compose-response-limit-settings, .compose-panel.m-full .compose-details-section .compose-response-limit-settings { display: none; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has([placeholder="＋TO"]) .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-row:has([placeholder="＋TO"]) .detail-field-label::before { content: "宛先:"; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has([placeholder="＋CC"]) .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-row:has([placeholder="＋CC"]) .detail-field-label::before { content: "Cc:"; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has([placeholder="＋BCC"]) .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-row:has([placeholder="＋BCC"]) .detail-field-label::before { content: "Bcc:"; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has(.compose-subject-multiline) .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-row:has(.compose-subject-multiline) .detail-field-label::before { content: "件名:"; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has(.sender-select) .detail-field-label::before, .compose-panel.m-full .compose-details-section .detail-field-row:has(.sender-select) .detail-field-label::before, .compose-split-bottom:not(.compact) .compose-details-section .m-sender-row .detail-field-label::before { content: "差出人:"; } .compose-split-bottom:not(.compact) .compose-details-section .m-sender-row, .compose-panel.m-full .compose-details-section .m-sender-row { display: flex; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-static, .compose-panel.m-full .compose-details-section .detail-field-static { font-size: 16px; color: var(--color-text-primary); min-width: 0; overflow-wrap: anywhere; } .compose-split-bottom:not(.compact) .compose-details-section .sender-select-wrap, .compose-panel.m-full .compose-details-section .sender-select-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-tags, .compose-panel.m-full .compose-details-section .detail-field-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has(.sender-select), .compose-panel.m-full .compose-details-section .detail-field-row:has(.sender-select), .compose-split-bottom:not(.compact) .compose-details-section .m-sender-row, .compose-panel.m-full .compose-details-section .m-sender-row { order: 8; } .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has(.compose-subject-multiline), .compose-panel.m-full .compose-details-section .detail-field-row:has(.compose-subject-multiline) { order: 9; }   .compose-split-bottom:not(.compact) .compose-details-section .detail-field-row:has([placeholder="＋TO"]), .compose-panel.m-full .compose-details-section .detail-field-row:has([placeholder="＋TO"]) { padding-right: 44px; }   .compose-split-bottom:not(.compact) .compose-details-section .details-close-row, .compose-panel.m-full .compose-details-section .details-close-row { position: absolute; top: 2px; right: 4px; padding: 0; margin: 0; z-index: 2; }   .compose-split-bottom:not(.compact) .compose-body-border, .compose-panel.m-full .compose-body-border { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .compose-split-bottom:not(.compact) .compose-body-scroll, .compose-panel.m-full .compose-body-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } .compose-split-bottom:not(.compact) .compose-body-grow, .compose-panel.m-full .compose-body-grow { flex: 1 1 auto; min-height: 160px; }   .compose-split-bottom:not(.compact) .m-subject-title, .compose-panel.m-full .m-subject-title { display: block; order: -3; flex: 0 0 auto; padding: 4px 14px 12px; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--color-text-primary); overflow-wrap: anywhere; } .compose-split-bottom:not(.compact) .m-subject-title:empty::before, .compose-panel.m-full .m-subject-title:empty::before { content: "件名"; color: var(--color-text-tertiary); font-weight: 500; } .compose-split-bottom:not(.compact) .compose-reply-subject-row, .compose-panel.m-full .compose-reply-subject-row { display: none; }   .compose-split-bottom:not(.compact) .compose-inline-recipients, .compose-panel.m-full .compose-inline-recipients { order: -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; border-top: 1px solid var(--color-border-subtle, #f1f1f6); border-bottom: 0; min-height: 40px; }   .compose-split-bottom:not(.compact) .compose-inline-recipients::before, .compose-panel.m-full .compose-inline-recipients::before { content: "宛先:"; color: var(--color-text-tertiary); font-size: var(--font-sm); flex: 0 0 auto; }   .compose-split-bottom:not(.compact) .compose-inline-recipients .recipient-tag, .compose-panel.m-full .compose-inline-recipients .recipient-tag { border: 0; background: var(--color-info-surface, #e8f0fe); color: var(--color-info, #1a56db); padding: 3px 9px; border-radius: 999px; font-size: var(--font-sm); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }     .compose-split-bottom:not(.compact) .compose-inline-recipients .inline-autocomplete-wrapper, .compose-panel.m-full .compose-inline-recipients .inline-autocomplete-wrapper { display: contents; }   .compose-split-bottom:not(.compact) .compose-inline-recipients .inline-recipient-input, .compose-panel.m-full .compose-inline-recipients .inline-recipient-input { order: 10; flex: 1 1 110px; min-width: 90px; width: auto; border: 0; background: transparent; outline: none; padding: 2px 0; font-size: 16px;   min-height: 28px; color: var(--color-text-primary); }   .compose-split-bottom:not(.compact) .compose-inline-recipients .btn-add-recipient, .compose-panel.m-full .compose-inline-recipients .btn-add-recipient { display: none; }   .compose-split-bottom:not(.compact) .compose-inline-recipients [data-testid="SendMessageAddToButton"], .compose-panel.m-full .compose-inline-recipients [data-testid="SendMessageAddToButton"] { display: inline-flex; order: 20; align-items: center; justify-content: flex-end; flex: 1 1 auto; margin-left: 0; min-width: 30px; width: auto; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-text-primary); font-size: 0;   } .compose-split-bottom:not(.compact) .compose-inline-recipients [data-testid="SendMessageAddToButton"]::before, .compose-panel.m-full .compose-inline-recipients [data-testid="SendMessageAddToButton"]::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-sunken, #f1f1f6); font-size: 20px; line-height: 1; font-weight: 500; } .compose-split-bottom:not(.compact) .compose-inline-recipients .btn-recip-overflow, .compose-panel.m-full .compose-inline-recipients .btn-recip-overflow { display: none; }   .compose-split-bottom:not(.compact) .btn-compose-tool.m-details-open, .compose-panel.m-full .btn-compose-tool.m-details-open { display: flex;   align-items: center; order: 99; flex: 0 0 calc(100% + 24px); width: calc(100% + 24px); box-sizing: border-box; margin: 4px -12px -8px; padding: 9px 12px; min-height: 40px; justify-content: flex-start; border: 0; border-top: 1px solid var(--color-border-subtle, #f1f1f6); border-radius: 0; background: var(--color-bg-base); color: var(--color-text-tertiary); font-size: 0; text-align: left; } .compose-split-bottom:not(.compact) .btn-compose-tool.m-details-open::before, .compose-panel.m-full .btn-compose-tool.m-details-open::before { content: "Cc/Bcc、差出人:"; font-size: var(--font-sm); }   .compose-split-bottom:not(.compact) .compose-inline-recipients .autocomplete-dropdown, .compose-panel.m-full .compose-inline-recipients .autocomplete-dropdown { position: static; order: 50; flex: 0 0 calc(100% + 24px); width: calc(100% + 24px); box-sizing: border-box; margin: 6px -12px 0; padding: 0; max-height: 46vh; overflow-y: auto; border: 0; border-top: 1px solid var(--color-border-default); border-radius: 0; box-shadow: none; background: var(--color-bg-base); } .compose-split-bottom:not(.compact) .compose-inline-recipients .autocomplete-item, .compose-panel.m-full .compose-inline-recipients .autocomplete-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle, #f1f1f6); font-size: var(--font-md); text-align: left; } .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-avatar, .compose-panel.m-full .compose-inline-recipients .candidate-avatar, .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-avatar-img, .compose-panel.m-full .compose-inline-recipients .candidate-avatar-img { width: 36px; height: 36px; font-size: var(--font-sm); flex: 0 0 auto; }   .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-fulladdress, .compose-panel.m-full .compose-inline-recipients .candidate-fulladdress { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; } .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-name, .compose-panel.m-full .compose-inline-recipients .candidate-name { font-size: var(--font-md); color: var(--color-text-primary); } .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-addr, .compose-panel.m-full .compose-inline-recipients .candidate-addr { font-size: var(--font-sm); color: var(--color-text-tertiary); }   .compose-split-bottom:not(.compact) .compose-inline-recipients .candidate-bracket, .compose-panel.m-full .compose-inline-recipients .candidate-bracket { display: none; } .compose-split-bottom:not(.compact) .compose-inline-recipients .autocomplete-group-label, .compose-panel.m-full .compose-inline-recipients .autocomplete-group-label { display: block; padding: 6px 12px 2px; font-size: var(--font-2xs, 11px); color: var(--color-text-tertiary); }   .compose-split-bottom:not(.compact) .compose-bottom-menu, .compose-panel.m-full .compose-bottom-menu { flex: 0 0 auto; flex-wrap: nowrap; row-gap: 0; gap: 6px; align-items: center; padding: 8px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-elevated); overflow: visible; }   .compose-split-bottom:not(.compact) .compose-bm-left, .compose-panel.m-full .compose-bm-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: visible; }   .compose-panel.m-full .compose-draft-list { flex: 0 1 auto; min-height: 0; max-height: 45vh; overflow-y: auto; }   .compose-split-bottom:not(.compact) .compose-bm-right, .compose-panel.m-full .compose-bm-right, .compose-split-bottom:not(.compact) .compose-bottom-right, .compose-panel.m-full .compose-bottom-right { flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px; }   .compose-split-bottom:not(.compact) .compose-bm-left > .btn-compose-tool, .compose-panel.m-full .compose-bm-left > .btn-compose-tool, .compose-split-bottom:not(.compact) .compose-bm-left .bm-template-split > .btn-compose-tool, .compose-panel.m-full .compose-bm-left .bm-template-split > .btn-compose-tool, .compose-split-bottom:not(.compact) .compose-bm-left .bm-ai-btn, .compose-panel.m-full .compose-bm-left .bm-ai-btn { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }   .compose-split-bottom:not(.compact) .bm-ai-word, .compose-panel.m-full .bm-ai-word { display: none; } .compose-split-bottom:not(.compact) .bm-ai-mark, .compose-panel.m-full .bm-ai-mark { font-size: 17px; line-height: 1; }   .compose-split-bottom:not(.compact) .bm-response-limit, .compose-panel.m-full .bm-response-limit { flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; height: 40px; border: 1px solid var(--color-border-default); border-radius: 10px; overflow: hidden; } .compose-split-bottom:not(.compact) .bm-response-limit.is-on, .compose-panel.m-full .bm-response-limit.is-on { border-color: var(--color-primary); } .compose-split-bottom:not(.compact) .bm-response-limit .bm-rl-time, .compose-panel.m-full .bm-response-limit .bm-rl-time { display: flex; align-items: center; gap: 4px; height: 100%; min-height: 0; padding: 0 9px; border: 0; border-radius: 0; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs, 11px); white-space: nowrap; } .compose-split-bottom:not(.compact) .bm-response-limit.is-on .bm-rl-time, .compose-panel.m-full .bm-response-limit.is-on .bm-rl-time { background: var(--color-primary); color: #fff; font-weight: 700; } .compose-split-bottom:not(.compact) .bm-rl-caret, .compose-panel.m-full .bm-rl-caret { flex: 0 0 24px; width: 24px; height: 100%; border: 0; border-left: 1px solid var(--color-border-default); border-radius: 0; background: transparent; color: var(--color-text-tertiary); font-size: 10px; line-height: 1; } .compose-split-bottom:not(.compact) .bm-response-limit.is-on .bm-rl-caret, .compose-panel.m-full .bm-response-limit.is-on .bm-rl-caret { background: var(--color-primary-soft, rgba(34, 187, 128, .12)); border-left-color: var(--color-primary); color: var(--color-primary-on-surface); }   .compose-popup-menu .menu-danger { color: var(--color-danger, #e5484d); }   .compose-split-bottom:not(.compact) .bm-narrow-anchor, .compose-panel.m-full .bm-narrow-anchor { position: relative; width: 0; height: 0; flex: 0 0 0; }   .message-detail-panel.composing-split .compose-split-bottom:has(.reply-line-bar) { flex: 0 0 auto; height: auto !important; max-height: none; overflow: visible;   padding-bottom: env(safe-area-inset-bottom, 0px); } .compose-split-top { min-height: 96px; } .compose-splitter { display: none; } .compose-bottom-menu { flex-wrap: wrap; row-gap: 6px; padding: 6px 8px; } .compose-bm-left { flex-wrap: wrap; } .compose-bm-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .compose-panel .btn-compose-tool { min-width: 36px; min-height: 36px; } .bm-send-split .btn-compose-send { min-height: 40px; }   .message-detail-panel.composing-split.compose-two-col { flex-direction: column; } .message-detail-panel.compose-two-col .compose-split-top { flex: 0 0 28%; min-height: 96px; } .message-detail-panel.composing-split.compose-two-col .compose-split-bottom { flex: 1 1 auto; max-height: none; border-left: none; border-top: 1px solid var(--color-border-default); }   .bulk-select-bar { flex-wrap: wrap; row-gap: 6px; } .bulk-select-bar .bulk-actions { flex: 1 0 100%; flex-wrap: wrap; gap: 6px; margin-left: 0; }   .bulk-select-bar .bulk-exit { position: absolute; top: 2px; right: 6px; min-width: 40px; } .bulk-select-bar .bulk-count { min-height: 36px; display: inline-flex; align-items: center; padding-right: 48px; } .bulk-select-bar .bulk-guide-btn, .bulk-select-bar .bulk-select-all, .bulk-select-bar .bulk-ai { display: inline-flex; } .bulk-select-bar .bulk-btn, .bulk-select-bar .bulk-guide-btn, .bulk-select-bar .bulk-exit { min-height: 36px; }   .tl-main:not(.index-full) { flex-direction: column; } .tl-main:not(.index-full) .tl-index { flex: 0 0 auto; max-height: 40%; border-right: none; border-bottom: 1px solid var(--color-border-default); } .tl-main:not(.index-full) .tl-content { flex: 1 1 auto; min-height: 0; } .tl-index-row { min-height: 48px; } .tl-index-search input { font-size: 16px; }   .mf-panel .mf-menu-item { min-height: 40px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .compose-split-top > .message-detail { flex: 1 1 0; min-height: 0; } .message-detail > .thread-scroll-row, .thread-scroll-row > .inhouse-quote-list { min-height: 0; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .compose-type-wrap > .compose-popup-menu.bm-popup-up { left: auto; right: 0; } .compose-type-wrap > .compose-popup-menu.bm-popup-up > button { min-height: 44px; font-size: 15px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .message-list-panel .msg-list-header-top, .message-list-panel .msg-list-header-new, .message-list-panel .search-bar, .message-list-panel .search-status, .message-list-panel .bulk-bar-fit, .message-list-panel .pin-bar { display: none; }   .mobile-folder-chips { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-folder-chips::-webkit-scrollbar { display: none; }   .mobile-folder-chips::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; align-self: stretch; margin-left: -8px; pointer-events: none; background: linear-gradient(to right, transparent, var(--color-bg-base) 75%); } .mobile-folder-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 18px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 14px; white-space: nowrap; cursor: pointer; } .mobile-folder-chip b { margin-left: 4px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } .mobile-folder-chip.on { background: var(--color-primary); color: var(--color-text-on-primary); font-weight: var(--weight-bold); }   .mobile-folder-chips {   overflow-x: visible; align-items: center;   position: relative; }   .mobile-folder-chips::after { content: none; } .mobile-folder-combo { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 12px 6px 16px; border: 0; border-radius: 22px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 14px; font-weight: var(--weight-bold); white-space: nowrap; cursor: pointer; } .mobile-folder-combo > span { overflow: hidden; text-overflow: ellipsis; } .mobile-folder-combo b { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } .mobile-folder-combo-caret { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--duration-fast) ease; }   .mobile-folder-spacer { flex: 1 1 auto; }   .message-list { background: var(--color-bg-base);   padding-bottom: 80px;   min-height: 40vh; } .message-list .message-item { background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); contain-intrinsic-size: auto 88px; -webkit-touch-callout: none; -webkit-user-select: none; } .message-list .message-item .msg-row-main { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-height: 0; } .message-list .message-item .msg-avatar { width: 44px; height: 44px; min-width: 44px; margin: 0; border-radius: 50%; }   .message-list .message-item .msg-avatar > .msg-avatar-img, .message-list .message-item .msg-avatar > .msg-avatar-initial, .message-list .message-item .msg-avatar > .msg-avatar-logo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; font-size: 17px; font-weight: var(--weight-bold); }   .message-list .message-item .msg-chat-mark { display: block; position: absolute; top: -2px; right: -2px; bottom: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-base); box-shadow: 0 0 0 2px var(--color-bg-base); } .message-list .message-item .msg-center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .message-list .message-item .msg-line1 { display: flex; align-items: baseline; gap: 8px; } .message-list .message-item .msg-sender-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: var(--weight-bold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .message-list .message-item .msg-line1-right { align-items: center; gap: 6px; } .message-list .message-item .msg-timestamp { margin: 0; font-size: 13px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; } .message-list .message-item .msg-alert-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px; font-weight: var(--weight-bold); } .message-list .message-item .msg-line2 { gap: 6px; } .message-list .message-item .msg-subject, .message-list .message-item.unread .msg-subject { font-size: 15px; font-weight: var(--weight-normal); color: var(--color-text-primary); } .message-list .message-item .msg-status-icons svg { width: 14px; height: 14px; } .message-list .message-item .msg-line3 { display: block; font-size: 14px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .message-list .message-item .msg-line3:empty { display: none; } .message-list .message-item.selected .msg-row-main { border: 0; border-radius: 0; }     .message-list .message-item .badge-aging,   .message-list .message-item .badge-task-nudge,   .message-list .message-item .badge-responded,   .message-list .message-item .msg-task-badge,   .message-list .message-item .badge-recent { display: none; }   .message-list .message-item .msg-status-icons .row-icon-mute { display: none; }   .message-list .message-item .msg-status-icons .status-icon-tooltip[title="リアクション期限を過ぎています"] { display: none; }   .message-list .message-item .badge-alert { font-size: 0; line-height: 0; width: 8px; height: 8px;   min-width: 8px; max-width: 8px; min-height: 8px; max-height: 8px; padding: 0; border-radius: 50%; border: 0; overflow: hidden; flex: 0 0 8px; align-self: center; }   .message-list .message-item .msg-avatar, .message-list .message-item .msg-avatar > .msg-avatar-img, .message-list .message-item .msg-avatar > .msg-avatar-initial, .message-list .message-item .msg-avatar > .msg-avatar-logo { width: 46px; height: 46px; min-width: 46px; flex-basis: 46px; }   .message-list .message-item .msg-line2 { min-width: 0; } .message-list .message-item .msg-subject { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .message-list .message-item .msg-status-icons { flex: 0 0 auto; }   .message-list.bulk-mode .message-item .msg-avatar, .message-list.bulk-mode .message-item .msg-line3, .message-list.bulk-mode .message-item .msg-alert-badge { display: none; } .message-list.bulk-mode .message-item.tone-bulk { background: var(--color-primary-surface); } .message-list.bulk-mode .msg-checkbox { position: relative; flex: 0 0 auto; width: 26px; height: 26px; margin: 9px 0 0; } .message-list.bulk-mode .msg-checkbox input { position: absolute; inset: 0; opacity: 0; margin: 0; } .message-list.bulk-mode .msg-checkbox .msg-checkbox-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--color-text-tertiary); border-radius: 50%; background: transparent; } .message-list.bulk-mode .msg-checkbox input:checked + .msg-checkbox-mark { border-color: var(--color-primary); background: var(--color-primary); } .message-list.bulk-mode .msg-checkbox input:checked + .msg-checkbox-mark::after { content: "\2713"; color: var(--color-text-on-primary); font-size: 15px; font-weight: var(--weight-bold); line-height: 1; }   .mobile-bulk-top { display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 1160;   height: calc(var(--topbar-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; background: var(--color-tooltip-bg); color: var(--color-text-on-primary); } .mobile-bulk-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: inherit; } .mobile-bulk-icon svg { width: 22px; height: 22px; } .mobile-bulk-count { flex: 1 1 auto; font-size: 18px; font-weight: var(--weight-bold); } .mobile-bulk-all { min-height: 40px; padding: 0 6px; border: 0; background: transparent; color: inherit; font-size: 15px; font-weight: var(--weight-semibold); } .mobile-bulk-bottom { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1160;     min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding-block: 8px; padding: 0 12px env(safe-area-inset-bottom); border-top: 1px solid var(--color-border-default); background: var(--color-bg-base); } .mobile-bulk-spacer { flex: 1 1 auto; } .mobile-bulk-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; font-weight: var(--weight-bold); white-space: nowrap; }   .mobile-bulk-selected { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-bulk-selected b { font-size: 17px; color: var(--color-text-primary); margin-right: 2px; } .mobile-bulk-btn.fill { flex: 0 0 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 24px; background: var(--color-primary); color: var(--color-text-on-primary); } .mobile-bulk-btn.line { border: 1.5px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); } .mobile-bulk-btn:disabled { opacity: 0.55; }   .mobile-new-message-fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px); z-index: 1050; width: 56px; height: 56px; border: 0; border-radius: 28px; background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: 0 6px 16px rgba(34, 187, 128, 0.4); } .mobile-new-message-fab svg { width: 26px; height: 26px; }     body:has(.slide-over-panel.open) .mobile-new-message-fab, body:has(.sc-consent-overlay) .mobile-new-message-fab { display: none; }   .load-more-chip { min-height: 44px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .message-detail-panel .btn-mobile-back { display: none; } .mobile-detail-head { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 8px 8px 4px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); } .mobile-detail-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--color-text-primary); } .mobile-detail-icon.muted { color: var(--color-text-secondary); }   .mobile-detail-nav { width: 34px; } .mobile-detail-nav:disabled { opacity: 0.35; } .mobile-detail-icon svg { width: 22px; height: 22px; } .mobile-detail-titles { flex: 1 1 auto; min-width: 0; } .mobile-detail-meta { font-size: 13px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-detail-subject { font-size: 17px; font-weight: var(--weight-bold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .message-detail-panel:not(.m-show-project) .detail-project-bar { display: none; }     .message-detail-panel .inhouse-quote-list { background: var(--color-bg-sunken); padding: 14px; overflow-x: hidden; overscroll-behavior-x: contain; } .message-detail-panel .inhouse-quote-list .quote-body, .message-detail-panel .inhouse-quote-list .body-line, .message-detail-panel .inhouse-quote-list .quote-subject { overflow-wrap: anywhere; }   .message-detail-panel .inhouse-quote-list .quote-item > *, .message-detail-panel .inhouse-quote-list .quote-body-row, .message-detail-panel .inhouse-quote-list .quote-body-row > *, .message-detail-panel .inhouse-quote-list .quote-body-border { min-width: 0; max-width: 100%; } .message-detail-panel .quote-item { margin-bottom: 14px; }   .message-detail-panel .quote-header .quote-sender, .message-detail-panel .quote-header .quote-time { font-size: 13px; font-weight: var(--weight-normal); color: var(--color-text-tertiary); }   .message-detail-panel .quote-body-border { max-width: 92%; padding: 12px 14px; border: 0; border-radius: 16px; }   .message-detail-panel .quote-body-border.surface-sys { border: 1px solid var(--color-border-default); border-radius: 8px; } .message-detail-panel .quote-body, .message-detail-panel .quote-body-border { font-size: 16px; line-height: 1.7; }     .message-detail-panel .floating-confirm-bar .fcb-check, .message-detail-panel .floating-confirm-bar .fcb-skip { flex: 1 1 0; justify-content: center; height: 44px; padding: 0 18px; font-size: 15px; }   .compose-split-bottom.compact { background: var(--color-bg-base); } .compose-compact-bar.is-empty { gap: 8px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: var(--color-bg-base); } .compose-compact-bar.is-empty .compact-reply-input { height: 44px; padding: 0 16px; border-radius: 22px; background: var(--color-bg-sunken); font-size: 16px; } .compose-compact-bar.is-empty .compact-reply-input::placeholder { font-size: 16px; } .compose-compact-bar.is-empty .compact-send-btn { display: none; } .compact-ai-pill { display: inline-flex; align-items: center; flex: 0 0 auto; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--color-tooltip-bg); color: var(--color-text-on-primary); font-size: 15px; font-weight: var(--weight-bold); white-space: nowrap; } .compact-ai-pill:disabled { opacity: 0.6; }   .mobile-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 1190; background: rgba(10, 12, 20, 0.32); } .mobile-sheet { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; max-height: 80dvh; overflow-y: auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--color-bg-base); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18); } .mobile-sheet-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--color-border-default); } .mobile-sheet-item { min-height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-primary); font-size: 16px; text-align: left; } .mobile-sheet-item.cancel { border-bottom: 0; color: var(--color-text-secondary); text-align: center; } .ai-reply-sheet-title { margin: 0; font-size: 16px; font-weight: var(--weight-bold); color: var(--color-text-primary); } .ai-reply-cand { padding: 12px 14px; border: 1.5px solid var(--color-border-default); border-radius: 14px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: 15px; line-height: 1.6; text-align: left; } .ai-reply-cand.loading { display: flex; align-items: center; gap: 8px; color: var(--color-text-tertiary); } .ai-reply-spin { width: 16px; height: 16px; border: 2px solid var(--color-border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .ai-reply-error { padding: 10px 12px; border-radius: 12px; background: var(--color-error-surface); color: var(--color-error); font-size: 14px; } .ai-reply-sheet-actions { display: flex; gap: 8px; } .ai-reply-sheet-btn { height: 44px; padding: 0 18px; border: 1.5px solid var(--color-border-default); border-radius: 22px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: 15px; font-weight: var(--weight-bold); white-space: nowrap; } .ai-reply-sheet-btn.wide { flex: 1 1 auto; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .message-list .message-item .msg-row-main, .message-list.density-compact .message-item .msg-row-main, .message-list.density-comfortable .message-item .msg-row-main { height: auto; margin: 0; overflow: visible; } .message-list .message-item::before { display: none; } .message-list .message-item { contain-intrinsic-size: auto 92px; } .load-more { padding: 0; background: var(--color-bg-base); } .load-more .load-more-band { min-height: 0; }   .load-more .load-more-chip { max-width: calc(100vw - 32px); white-space: normal; flex-wrap: wrap; justify-content: center; }   .message-list.bulk-mode .msg-checkbox input:checked + .msg-checkbox-mark::after { display: block; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   html.m-sheet-open .message-detail-panel { z-index: 1105; }   .message-detail-panel { padding-bottom: var(--host-bottom-inset, 0px); } .mobile-bulk-top { background: linear-gradient(var(--color-tooltip-bg), var(--color-tooltip-bg)), var(--color-bg-base); } .message-detail-panel .floating-confirm-bar .fcb-spacer { display: none; } .message-detail-panel .floating-confirm-bar .fcb-check, .message-detail-panel .floating-confirm-bar .fcb-skip { white-space: nowrap; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {       .mobile-folder-ai { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 14px; font-weight: var(--weight-semibold); white-space: nowrap; } .mobile-folder-ai:disabled { opacity: 0.6; } .mobile-folder-ai-spin { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } .mobile-select-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; border: none; background: none; color: var(--color-text-secondary); font-size: 14px; white-space: nowrap; } .mobile-select-btn:active { color: var(--color-text-primary); } .mobile-select-btn svg { width: 16px; height: 16px; color: var(--color-primary-dark); }   .mobile-select-btn.mobile-refresh-btn { width: 36px; padding: 0; justify-content: center; } .mobile-select-btn.mobile-refresh-btn:disabled { opacity: 0.6; } .mobile-select-btn.mobile-refresh-btn svg { color: var(--color-text-primary); } }   .qcm-touch-only { display: contents; } @media (min-width: 769px) and (min-height: 501px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { .qcm-touch-only { display: none; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {     .thread-context-strip { margin: 2px 8px; padding: 0; border: 0; background: transparent; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .inhouse-quote-list .quote-item { max-width: 86%; } .inhouse-quote-list .quote-item.mine { margin-left: auto; }   .quote-item.group-cont .quote-header-left { display: none; } .quote-item.group-cont { margin-top: -6px; }   .quote-item .quote-time { display: none; } .quote-item .quote-time-short { display: inline; font-size: 11px; color: var(--color-text-tertiary); }   .quote-item .quote-header { row-gap: 2px; flex-wrap: wrap; } .quote-item .quote-header-left { min-width: 0; flex: 1 1 auto; }   .quote-item .quote-check-area, .quote-item .rl-pill { flex: 0 1 auto; min-width: 0; }   .quote-item .checked-by-user { display: none; } .quote-item .quote-hover-bar:not(.is-hidden) { flex: 0 0 auto; min-height: 0; margin: 0 0 0 auto; gap: 8px; align-items: center; } .quote-item.mine .quote-hover-bar:not(.is-hidden) { justify-content: flex-end; } .quote-hover-bar .btn-quote-action { width: 30px; height: 30px; }   .quote-item.mine .quote-body-row { justify-content: flex-end; } .quote-item.mine .quote-body-border:not(.surface-sys) { border-top-right-radius: 5px; } .quote-item.theirs .quote-body-border:not(.surface-sys) { border-top-left-radius: 5px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .quote-neglect-nudge { gap: 8px; padding: 6px 10px; border-radius: 8px; } .quote-neglect-nudge .qnn-sub { display: none; } .quote-neglect-nudge .qnn-lead { font-size: 12px; } .quote-neglect-nudge .qnn-icon { display: none; } .quote-neglect-nudge .qnn-action { min-height: 32px; padding: 0 12px; font-size: 12px; }   .quote-item .quote-sender { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }   .thread-context-strip .tcs-row { justify-content: flex-end; min-height: 0; } .theme-files-entry { height: 28px; }     .inhouse-quote-list .quote-item .quote-check-mark.unchecked, .inhouse-quote-list .quote-item .quote-check-mark.checked { visibility: hidden; } .inhouse-quote-list .quote-item.just-toggled .quote-check-mark.checked, .inhouse-quote-list .quote-item.just-toggled .quote-check-mark.unchecked { visibility: visible; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .inhouse-quote-list .quote-item { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px;   column-gap: 8px; } .inhouse-quote-list .quote-item .quote-header { display: contents; }   .inhouse-quote-list .quote-item .quote-header-left { order: 1; flex: 1 0 100%; }   .inhouse-quote-list .quote-item .quote-body-row { order: 2; flex: 1 0 100%; }   .inhouse-quote-list .quote-item .quote-time-short { order: 3; } .inhouse-quote-list .quote-item .quote-check-area { order: 4; } .inhouse-quote-list .quote-item .rl-pill { order: 5; } .inhouse-quote-list .quote-item .quote-hover-bar:not(.is-hidden) { order: 6; margin-left: auto; }   .inhouse-quote-list .quote-item .quote-resolved-badge { position: static; transform: none; order: 5; padding: 0; border-radius: 0; background: transparent; color: var(--color-primary-on-surface); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0; opacity: 1; } .inhouse-quote-list .quote-item .quote-resolved-badge::before { content: "\2713\00a0"; }   .inhouse-quote-list .quote-item .quote-time-short { padding-left: 10px; } .inhouse-quote-list .quote-item .quote-time-short, .inhouse-quote-list .quote-item .quote-check-area, .inhouse-quote-list .quote-item .rl-pill { font-size: 10px; color: var(--color-text-tertiary); }   .inhouse-quote-list .quote-item .rl-pill { border: 0; background: transparent; padding: 0; height: auto; gap: 0; } .rl-pill .rl-pill-icon, .rl-pill .rl-pill-long { display: none; } .rl-pill .rl-pill-short { display: inline; }   .checked-by-user { display: none; } .checked-by-user-short { display: inline; }   .inhouse-quote-list .quote-item .quote-add-contact { display: none; }   .inhouse-quote-list .quote-item.mine .quote-time-short { margin-left: auto; }   .reply-line-overlay { display: none; }   .quote-scope-boundary { border: 0; background: transparent; padding: 2px 0; font-size: 11px; color: var(--color-text-tertiary); } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .inhouse-quote-list .quote-item.fcb-target { box-shadow: none; } .inhouse-quote-list .quote-selected-dot { display: none; }     .inhouse-quote-list .quote-item { padding-left: 42px; } .inhouse-quote-list .quote-item.mine { padding-left: 0; } .inhouse-quote-list .quote-item .quote-avatar { position: absolute; left: 0; top: 4px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; }   .inhouse-quote-list .quote-item.group-cont .quote-avatar, .inhouse-quote-list .quote-item.mine .quote-avatar { display: none; }   .inhouse-quote-list .quote-item.group-head .quote-header-left { min-height: 34px; align-items: center; }   .inhouse-quote-list .quote-item .quote-body-row { order: 3; } .inhouse-quote-list .quote-item .quote-time-short { order: 4; } .inhouse-quote-list .quote-item .quote-check-area { order: 5; } .inhouse-quote-list .quote-item .rl-pill { order: 6; } .inhouse-quote-list .quote-item .quote-hover-bar:not(.is-hidden) { order: 7; } } @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) {   .html-mail-toolbar .html-mail-more, .html-mail-toolbar .ext-img-mini { display: none; } .html-mail-toolbar .html-mail-acts { display: contents; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .rlb-status { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; overflow: hidden; white-space: nowrap; font: inherit; } .rlb-st-arrow { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-text-secondary); } .rlb-st-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--color-text-primary); } .rlb-st-more { flex: 0 0 auto; font-size: 13px; color: var(--color-text-secondary); } .rlb-st-sep { flex: 0 0 auto; width: 1px; height: 12px; margin: 0 2px; background: var(--color-border-default);   } .rlb-st-tail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-secondary); } .rlb-st-tail svg { width: 14px; height: 14px; }   .rlb-st-tail.is-urgent { color: var(--color-warning-badge); }   .rlb-st-chev { flex: 0 0 auto; width: 15px; height: 15px; margin-left: auto; color: var(--color-border-muted);   }   .rlb-type-anchor { position: relative; height: 0; }   .rlb-status .rlb-to, .reply-line-bar .rlb-to { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;   max-width: 100%; margin-bottom: 2px; background: var(--color-primary-surface); border-radius: 999px; }   .rlb-status .rlb-to { margin-bottom: 0; background: transparent; border-radius: 0; } .rlb-status .rlb-to-name, .reply-line-bar .rlb-to-name { display: inline-flex; align-items: center; gap: 3px; min-width: 0; border: 0; background: transparent; color: var(--color-primary-dark); font-size: var(--font-2xs);   line-height: 18px; padding: 0 2px 0 8px; } .rlb-status .rlb-to-icon, .reply-line-bar .rlb-to-icon { width: 11px; height: 11px; flex: 0 0 auto; } .rlb-status .rlb-to-text, .reply-line-bar .rlb-to-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rlb-status .rlb-to-clear, .reply-line-bar .rlb-to-clear { flex: 0 0 auto; border: 0; background: transparent; color: var(--color-primary-dark); font-size: var(--font-xs); line-height: 18px; padding: 0 7px 0 3px; }     .reply-line-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 8px; padding: 10px 8px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .reply-line-tools .rlt-item { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font-size: var(--font-2xs); color: var(--color-text-secondary); min-width: 0; } .reply-line-tools .rlt-ic { position: relative; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-primary-surface); color: var(--color-primary-on-surface); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-md); }   .reply-line-tools .rlt-item.is-on .rlt-ic { background: var(--color-primary); color: var(--color-text-on-primary); } .reply-line-tools .rlt-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .reply-line-tools.is-list { display: block; max-height: 40vh; overflow-y: auto; padding: 6px; } .reply-line-tools.is-list .rlt-row { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--radius-sm); padding: 7px 8px; } .reply-line-tools.is-list .rlt-row + .rlt-row { border-top: 1px solid var(--color-border-default); } .reply-line-tools.is-list .rlt-row-title { display: block; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .reply-line-tools.is-list .rlt-row-body { display: block; font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-line-tools.is-list .rlt-row.is-manage .rlt-row-title { color: var(--color-primary-on-surface); } .reply-line-tools.is-list .rlt-row.is-manage .rlt-row-title > span + span { margin-left: 4px; }   .reply-line-bar { position: relative;   display: flex; align-items: flex-end; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 12px; } .reply-line-tools { max-width: 100%; }   .compose-split-bottom.compact > .reply-line-tools { margin: 0 5px 8px; } .reply-line-bar > .rlb-type-anchor { position: absolute; left: 0; right: 0; top: 0; height: 0; }   .reply-line-bar .rlb-plus, .reply-line-bar .rlb-send, .reply-line-bar .rlb-field {   box-sizing: border-box; } .reply-line-bar .rlb-plus { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform var(--duration-fast) ease; }   .reply-line-bar .rlb-plus svg { width: 20px; height: 20px; }   .reply-line-bar .rlb-plus.is-open { transform: rotate(45deg); background: var(--color-bg-sunken); }   .reply-line-bar .rlb-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 20px; padding: 6px 8px 6px 14px; min-height: 40px; } .reply-line-bar .rlb-kind { flex: 0 0 auto; width: 24px; height: 24px; margin-bottom: 2px; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); display: inline-flex; align-items: center; justify-content: center; padding: 0; }   .reply-line-bar .rlb-kind.t-email { background: var(--color-info); } .reply-line-bar .rlb-kind:disabled { opacity: 1; } .reply-line-bar .rlb-input { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; outline: none;   padding: 3px 0; max-height: 120px;     font-size: 16px;   line-height: 20px; color: var(--color-text-primary); font-family: inherit; overflow-y: hidden;   } .reply-line-bar .rlb-mini { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--color-border-default); border-radius: 50%; background: transparent; color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: var(--font-xs);   } .reply-line-bar .rlb-mini:disabled { opacity: .45; }     .reply-line-bar .rlb-field { flex-wrap: wrap; } .reply-line-bar .rlb-input { flex: 1 1 140px; min-width: 140px; }   .reply-line-bar .mention-popup { left: 0; right: 0; min-width: 0; bottom: calc(100% + 6px); max-height: 40vh; } .reply-line-bar .rlb-ghost { position: absolute; left: 40px; right: 64px; bottom: 8px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); } .reply-line-bar .rlb-send { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); display: inline-flex; align-items: center; justify-content: center; padding: 0; }   .reply-line-bar .rlb-send svg { width: 18px; height: 18px; } .reply-line-bar .rlb-send.email { background: var(--color-info); }   .reply-line-bar .rlb-send { position: relative; } .reply-line-bar .rlb-send.has-deadline::after { content: ""; position: absolute; right: 1px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-warning); border: 1.5px solid var(--color-bg-base); } .reply-line-bar .rlb-send:disabled { opacity: .45; }   .reply-line-bar .compose-type-wrap { position: relative; } }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { .reply-line-tools, .reply-line-bar { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {           body:has(.reply-line-bar .rlb-input:not(:placeholder-shown):focus) .message-detail-panel .floating-confirm-bar, .message-detail-panel:has(.compose-split-bottom.compact .compose-panel:focus-within) .floating-confirm-bar { display: none; }     .message-detail-panel:not(:has(.compose-panel:focus-within)) .compose-split-bottom.compact .compose-panel > *:not(.reply-line-bar) { display: none; }   .message-detail-panel:not(:has(.compose-panel:focus-within)) .compose-split-bottom.compact .rlb-plus, .message-detail-panel:not(:has(.compose-panel:focus-within)) .compose-split-bottom.compact .rlb-mini { display: none; }   .message-detail-panel:not(:has(.compose-panel:focus-within)):not(:has(.rlb-input:not(:placeholder-shown))) .compose-split-bottom.compact .rlb-send { display: none; }   .message-detail-panel:not(:has(.compose-panel:focus-within)) .compose-split-bottom.compact .reply-line-bar { padding-left: 62px; padding-right: 62px; }   .message-detail-panel:not(:has(.compose-panel:focus-within)) .floating-confirm-bar {   position: fixed; left: 0; right: 0; bottom: var(--sab, env(safe-area-inset-bottom, 0px)); height: 56px;   padding: 8px 14px; background: transparent; border: 0; box-shadow: none;   z-index: 40; pointer-events: none;   }   .message-detail-panel:not(:has(.compose-panel:focus-within)) .floating-confirm-bar > button { pointer-events: auto; }   .message-detail-panel:not(:has(.compose-panel:focus-within)) .floating-confirm-bar .fcb-check, .message-detail-panel:not(:has(.compose-panel:focus-within)) .floating-confirm-bar .fcb-jump, .message-detail-panel:not(:has(.compose-panel:focus-within)) .floating-confirm-bar .fcb-all-checked { margin-left: auto; }   .message-detail-panel .floating-confirm-bar .fcb-check, .message-detail-panel .floating-confirm-bar .fcb-reply, .message-detail-panel .floating-confirm-bar .fcb-more, .message-detail-panel .floating-confirm-bar .fcb-jump, .message-detail-panel .floating-confirm-bar .fcb-all-checked { height: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; }   .message-detail-panel .floating-confirm-bar .fcb-check { flex: 1.4 1 0; color: var(--color-primary-on-surface); font-weight: 700; }   .message-detail-panel .floating-confirm-bar .fcb-check svg { stroke: currentColor; stroke-width: 2.6; } .message-detail-panel .floating-confirm-bar .fcb-jump, .message-detail-panel .floating-confirm-bar .fcb-all-checked { flex: 1.4 1 0; color: var(--color-text-secondary); } .message-detail-panel .floating-confirm-bar .fcb-reply { flex: 1 1 0; color: var(--color-text-primary); } .message-detail-panel .floating-confirm-bar .fcb-more { flex: 0.55 1 0; color: var(--color-text-primary); } .message-detail-panel .floating-confirm-bar .fcb-reply, .message-detail-panel .floating-confirm-bar .fcb-more { display: flex; }   .message-detail-panel .floating-confirm-bar .fcb-reply, .message-detail-panel .floating-confirm-bar .fcb-more { box-shadow: inset 1px 0 0 var(--color-border-subtle, #e6e9ee); } .message-detail-panel .floating-confirm-bar .fcb-check svg, .message-detail-panel .floating-confirm-bar .fcb-reply svg, .message-detail-panel .floating-confirm-bar .fcb-jump svg { width: 19px; height: 19px; } .message-detail-panel .floating-confirm-bar .fcb-more svg { width: 20px; height: 20px; }   .message-detail-panel .floating-confirm-bar .fcb-skip { display: none; }   .message-detail-panel .floating-confirm-bar .fcb-endconv { display: none; } .message-detail-panel .floating-confirm-bar .fcb-more { position: relative; } .message-detail-panel .floating-confirm-bar .fcb-more.has-endconv::after { content: ""; position: absolute; top: 11px; right: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }   .mrs-sheet .mrs-row.mrs-accent .mrs-label, .mrs-sheet .mrs-row.mrs-accent > svg { color: var(--color-primary-dark, #1a9e6c); stroke: var(--color-primary-dark, #1a9e6c); } .mrs-sheet .mrs-row.mrs-accent .mrs-label { font-weight: 700; flex: 0 0 auto; }   .mrs-sheet .mrs-row.mrs-accent .mrs-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }   .message-detail-panel .endconv-overlay { position: fixed; left: 12px; right: 12px; bottom: calc(48px + 24px + env(safe-area-inset-bottom, 0px)); z-index: 1310; margin: 0; border-radius: 14px; box-shadow: 0 6px 24px rgba(20, 20, 19, 0.20); } .message-detail-panel .endconv-backdrop { z-index: 1305; }   .mrs-sheet .mrs-spark { width: 24px; text-align: center; font-size: 15px; flex: 0 0 auto; }   .compose-split-bottom.compact { display: none; }       .message-detail-panel.composing-split .compose-split-bottom.compact:not(:has(.reply-line-bar)) { display: none; } .message-detail-panel.composing-split .compose-split-bottom.compact { display: block; position: sticky; bottom: 0; z-index: 30; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default);   padding-bottom: 0; } .message-detail-panel.composing-split .compose-split-bottom.compact > .compose-panel { padding-bottom: var(--sab, env(safe-area-inset-bottom, 0px)); }   .message-detail-panel.composing-split .compose-split-bottom.compact .compact-reply-input.is-inline { flex: 1 1 auto; min-width: 0; min-height: 36px; max-height: 112px; padding: 8px 14px; border: 0; border-radius: 18px; background: var(--color-bg-subtle, #F4F5F3); font: inherit; font-size: 15px; line-height: 1.5; resize: none; overflow-y: auto; } .message-detail-panel.composing-split .compose-split-bottom.compact .compact-reply-input.is-inline:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }   .mrs-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 20, 19, 0.42); } .mrs-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201; background: var(--color-bg-base); border-radius: 18px 18px 0 0;   padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px) + var(--host-bottom-inset, 0px)); box-shadow: 0 -6px 24px rgba(20, 20, 19, 0.18); } .mrs-grip { width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--color-border-default); }   .mrs-head { padding: 0 20px 12px; border-bottom: 1px solid var(--color-border-subtle, #edeff2); } .mrs-subject { font-size: 15px; font-weight: 700; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrs-from { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; } .mrs-row { width: 100%; box-sizing: border-box; padding: 15px 20px; border: 0; border-bottom: 1px solid var(--color-border-subtle, #edeff2); background: transparent; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; } .mrs-row:last-of-type { border-bottom: 0; } .mrs-row svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--color-text-secondary); } .mrs-label { flex-grow: 1; min-width: 0; font-size: 16px; color: var(--color-text-primary); }   .mrs-sub { flex-shrink: 1; min-width: 0; font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrs-cancel-wrap { padding: 10px 14px 0; } .mrs-cancel { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--color-bg-subtle, #eef0f3); color: var(--color-text-secondary); font-size: 16px; font-weight: 600; cursor: pointer; }   .quote-neglect-nudge .qnn-action span { display: none; } .quote-neglect-nudge .qnn-action { min-width: 36px; padding: 0 9px; justify-content: center; }   .quote-check-mark { min-width: 28px; min-height: 28px; background: transparent; } .quote-check-mark.checked, .quote-check-mark.target, .quote-check-mark.unchecked { width: 28px; height: 28px; background: transparent; border: 0; box-shadow: none;   position: sticky; top: 8px; bottom: 150px; } .quote-check-mark.checked::before, .quote-check-mark.target::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }   .quote-check-mark.checked::before { width: 20px; height: 20px; border-radius: 4px; background: var(--color-primary); }   .quote-check-mark.target::before { width: 24px; height: 24px; border-radius: 5px; background: #fff; border: 2px solid var(--color-error); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }   .quote-check-mark svg { position: relative; z-index: 1; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {     .slide-over-panel .slide-over-body:has(.compose-panel.m-full) { padding: 0; overflow: hidden; } .compose-panel.m-full { height: 100%; }   .compose-panel.m-full .compose-fixed-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px 6px; border: 0; min-height: 48px; }   .compose-panel.m-full .compose-fixed-header .m-draft-new, .compose-panel.m-full .compose-fixed-header .compose-header-sep, .compose-panel.m-full .compose-fixed-header [data-testid="SendMessageDraftDeleteButton"], .compose-panel.m-full .compose-fixed-header .compose-draft-toggle-wrap, .compose-panel.m-full .compose-bottom-right .response-limit-toggle-area { display: none; } .compose-panel.m-full .compose-fixed-header .m-more { display: inline-flex; align-items: center; justify-content: center; order: 9; width: 34px; height: 34px; min-width: 34px; min-height: 34px; flex: 0 0 auto; } .compose-panel.m-full .compose-fixed-header .compose-type-badge { font-size: var(--font-xs); padding: 3px 9px; }   .compose-panel.m-full .compose-subject-row { padding: 4px 12px 10px; border: 0; gap: 0; } .compose-panel.m-full .compose-subject-row .compose-subject-icon { display: none; } .compose-panel.m-full .compose-subject-input { font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; padding: 0; border: 0; background: transparent; outline: none; }   .compose-panel.m-full .btn-compose-tool.m-details-open::before { content: "Cc/Bcc、テーマ:"; }   .compose-panel.m-full .ai-suggest-card { margin: 0; padding: 4px 12px; border-radius: 0; border-left: 0; border-right: 0; }     .compose-panel .m-rl-pill { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 30px; padding: 0 10px; border: 1px solid var(--color-primary); border-radius: 15px; background: transparent; color: var(--color-primary-on-surface); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; } .compose-panel .m-rl-pill.is-off { border-color: var(--color-border-default); color: var(--color-text-secondary); font-weight: 400; }   .compose-split-bottom:not(.compact) .compose-bottom-right .response-limit-toggle-area { display: none; } .rl-sheet { max-height: 88vh; overflow-y: auto; } .rl-head { padding: 0 20px 12px; font-size: 15px; font-weight: 700; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-subtle, #edeff2); }   .rl-sheet .rl-toggle { cursor: pointer; } .rl-switch { flex: 0 0 auto; width: 40px; height: 24px; border-radius: 12px; background: var(--color-border-default); position: relative; transition: background .15s; } .rl-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 19, .28); transition: left .15s; } .rl-switch.on { background: var(--color-primary); } .rl-switch.on::after { left: 18px; }   .rl-big { padding: 14px 20px 10px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-text-primary); font-variant-numeric: tabular-nums; } .rl-big-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }   .rl-sheet .compose-response-limit-settings { padding: 0 20px 4px; } .rl-sheet .response-limit-fields { display: block; } .rl-sheet .popup-sub-label { margin: 6px 0 6px; font-size: 11px; } .rl-sheet .bm-rl-quick { display: flex; flex-wrap: wrap; gap: 8px; } .rl-sheet .bm-rl-quick button { flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; } .rl-sheet .response-limit-datetime { width: 100%; box-sizing: border-box; height: 40px; font-size: 16px;   }   .rl-sheet .rl-hours-label, .rl-sheet .response-limit-hours, .rl-sheet .response-limit-unit { display: none; } .rl-sheet .response-users-row { display: block; padding: 10px 0 2px; border-top: 1px solid var(--color-border-subtle, #edeff2); margin-top: 12px; } .rl-sheet .response-users-row .detail-field-label-sm { display: block; margin-bottom: 6px; font-size: 11px; } .rl-sheet .detail-recipient-input { font-size: 16px; min-height: 34px; } .rl-done-wrap { padding: 12px 14px 0; } .rl-done { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }     .compose-panel.m-full, .message-detail-panel.composing-split .compose-split-bottom:not(.compact) { border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -2px 24px rgba(16, 18, 24, .14); background: var(--color-bg-elevated); }   .ios-navbar {   order: -10; flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border-bottom: 1px solid var(--color-border-subtle, #eef0f3); background: var(--color-bg-elevated); } .ios-nav-cancel { justify-self: start; white-space: nowrap; min-height: 44px; padding: 0 4px; border: 0; background: transparent; font-size: 17px; color: var(--color-primary-on-surface); }   .ios-nav-title { justify-self: center; max-width: 100%; min-width: 0; font-size: 17px; font-weight: var(--weight-bold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ios-nav-send { justify-self: end; width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; } .ios-nav-send svg { width: 18px; height: 18px; } .ios-nav-send:disabled { background: var(--color-border-default); color: var(--color-text-tertiary); }   .compose-panel.m-full .compose-card-header .btn-compose-tool[aria-label="Esc"], .compose-split-bottom:not(.compact) .compose-card-header .btn-compose-tool[aria-label="Esc"], .compose-split-bottom:not(.compact) .bm-send-split, .compose-panel.m-full .bm-send-split { display: none; }   .sch-sheet-wrap { display: contents; }   .sch-sheet-wrap .schedule-settings { padding: 0 20px 16px; } .sch-sheet-wrap .schedule-settings .popup-section-label { display: none; }   .compose-split-bottom:not(.compact) .m-subject-title, .compose-panel.m-full .m-subject-title { display: none; }   .compose-split-bottom:not(.compact) .compose-reply-preview, .compose-panel.m-full .compose-reply-preview { display: none; }   .compose-panel.m-full .compose-card-header, .compose-split-bottom:not(.compact) .compose-card-header { min-height: 0; padding: 6px 12px; border-bottom: 1px solid var(--color-border-subtle, #eef0f3); background: transparent; }     .compose-panel.m-full .compose-inline-recipients, .compose-split-bottom:not(.compact) .compose-inline-recipients, .compose-panel.m-full .compose-subject-row, .compose-panel.m-full .compose-sender-row, .compose-split-bottom:not(.compact) .compose-sender-row { min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--color-border-subtle, #eef0f3); border-radius: 0; background: transparent; align-items: center; } .compose-panel.m-full .compose-subject-input, .compose-panel.m-full .compose-inline-to-input, .compose-split-bottom:not(.compact) .compose-inline-to-input { min-height: 44px; border: 0; background: transparent; font-size: 17px; } .compose-panel.m-full .compose-subject-icon { display: none; }   .compose-panel.m-full .recipient-chip, .compose-split-bottom:not(.compact) .recipient-chip { height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: 15px; }   .compose-panel.m-full .compose-body-input, .compose-split-bottom:not(.compact) .compose-body-input, .compose-panel.m-full .compose-body-textarea, .compose-split-bottom:not(.compact) .compose-body-textarea { border: 0; border-radius: 0; padding: 12px; font-size: 17px; line-height: 1.5; background: transparent; }   .compose-panel.m-full .compose-body-card, .compose-split-bottom:not(.compact) .compose-body-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }     .compose-split-bottom:not(.compact) .compose-bottom-menu, .compose-panel.m-full .compose-bottom-menu { border-top: 1px solid var(--color-border-subtle, #eef0f3); background: var(--color-bg-base);   padding: 4px 8px max(6px, calc(env(safe-area-inset-bottom, 0px) - 12px)); }   .compose-split-bottom:not(.compact) .compose-inline-recipients .inline-recipient-input, .compose-panel.m-full .compose-inline-recipients .inline-recipient-input { flex: 0 1 auto; width: 56px; min-width: 0; } .compose-split-bottom:not(.compact) .compose-inline-recipients .inline-recipient-input:focus, .compose-panel.m-full .compose-inline-recipients .inline-recipient-input:focus { flex: 1 1 140px; width: auto; min-width: 120px; } .compose-split-bottom:not(.compact) .compose-inline-recipients, .compose-panel.m-full .compose-inline-recipients { row-gap: 4px; padding: 6px 12px; }   .compose-split-bottom:not(.compact) .compose-bottom-menu .btn-compose-tool, .compose-panel.m-full .compose-bottom-menu .btn-compose-tool { color: var(--color-text-secondary); background: transparent; border: 0; } .compose-split-bottom:not(.compact) .compose-bottom-menu .btn-compose-tool svg, .compose-panel.m-full .compose-bottom-menu .btn-compose-tool svg { stroke: currentColor; }   .compose-split-bottom:not(.compact) .bm-response-limit.is-on .bm-rl-time, .compose-panel.m-full .bm-response-limit.is-on .bm-rl-time { background: var(--color-primary-surface); color: var(--color-primary-dark); } .compose-split-bottom:not(.compact) .bm-response-limit.is-on .bm-rl-caret, .compose-panel.m-full .bm-response-limit.is-on .bm-rl-caret { background: transparent; }   .compose-popup-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1); background: transparent; }     .message-detail-panel .floating-confirm-bar { position: relative;   display: flex; flex-direction: row; flex-wrap: nowrap;   align-items: center; gap: 8px; margin: 0;     height: calc(56px + var(--sab, env(safe-area-inset-bottom, 0px))); padding: 8px 14px calc(7px + var(--sab, env(safe-area-inset-bottom, 0px))); background: var(--color-bg-elevated); border: 0; border-top: 1px solid var(--color-border-default); border-radius: 0; box-shadow: 0 -1px 8px rgba(16, 18, 24, .06); overflow: visible;   }   .message-detail-panel .floating-confirm-bar .fcb-more { order: 1; } .message-detail-panel .floating-confirm-bar .d-field { order: 2; } .message-detail-panel .floating-confirm-bar .fcb-check, .message-detail-panel .floating-confirm-bar .fcb-jump { order: 3; }   .message-detail-panel .floating-confirm-bar .fcb-more { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; gap: 0; border: 1px solid var(--color-border-default); border-radius: 20px; background: var(--color-bg-elevated); box-shadow: none; font-size: 0; color: var(--color-text-primary); } .message-detail-panel .floating-confirm-bar .fcb-more svg { width: 22px; height: 22px; }   .message-detail-panel .floating-confirm-bar .d-field { flex: 1 1 auto; min-width: 0; height: 40px;   box-sizing: border-box; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--color-border-default); border-radius: 20px; background: var(--color-bg-base); font-size: 15px; color: var(--color-text-tertiary); -webkit-appearance: none; appearance: none; font-family: inherit; font-weight: 400; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }   .message-detail-panel .floating-confirm-bar .d-field > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .message-detail-panel .floating-confirm-bar .fcb-check { position: relative; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0;     box-shadow: 0 0 0 3px var(--color-border-default), 0 3px 10px rgba(34, 187, 128, .36); display: flex; align-items: center; justify-content: center; z-index: 6; } .message-detail-panel .floating-confirm-bar .fcb-check svg { width: 21px; height: 21px; stroke: #fff; stroke-width: 2.6; }   .message-detail-panel .floating-confirm-bar .fcb-check.fcb-armed { background: var(--color-warning); box-shadow: 0 3px 10px rgba(232, 163, 61, .45); font-size: 0; } .message-detail-panel .floating-confirm-bar .fcb-check.fcb-armed::before { content: "!"; font-size: 22px;   font-weight: var(--weight-bold); line-height: 1; color: #fff; } .message-detail-panel .floating-confirm-bar .fcb-check.fcb-armed::after { content: "保護中 — もう一度で解除"; position: absolute; right: 0; bottom: calc(100% + 8px);   padding: 5px 11px; border-radius: 999px; background: var(--color-text-primary); color: var(--color-bg-elevated); font-size: 11px; font-weight: 500; white-space: nowrap; }   .message-detail-panel .floating-confirm-bar .fcb-check.is-busy { opacity: 1; } .message-detail-panel .floating-confirm-bar .fcb-check.is-busy svg { visibility: visible; } .message-detail-panel .floating-confirm-bar .fcb-check.is-busy::before { content: none; } .message-detail-panel .floating-confirm-bar .fcb-check.is-busy::after { content: ""; position: absolute; inset: -4px;   border: 3px solid transparent; border-top-color: var(--color-primary-dark); border-right-color: var(--color-primary-dark); border-radius: 50%; animation: fcb-busy-spin .7s linear infinite; pointer-events: none; }   .message-detail-panel .floating-confirm-bar .fcb-ring { position: absolute;   top: calc(8px + 20px - 27px); right: calc(14px + 20px - 27px); width: 54px; height: 54px; z-index: 7; pointer-events: none; }   .message-detail-panel .floating-confirm-bar .fcb-ring .fcb-ring-bg { stroke: transparent; } .message-detail-panel .floating-confirm-bar .fcb-ring .fcb-ring-fg { stroke-width: 1.1; }     .message-detail-panel .floating-confirm-bar .fcb-skip { display: none; }     .message-detail-panel .floating-confirm-bar .fcb-jump { position: relative; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: 0;   box-shadow: 0 3px 10px rgba(34, 187, 128, .20); display: flex; align-items: center; justify-content: center; z-index: 6; } .message-detail-panel .floating-confirm-bar .fcb-jump svg { width: 19px; height: 19px; } .message-detail-panel .floating-confirm-bar .fcb-jump:disabled { opacity: .5; }   .message-detail-panel .floating-confirm-bar .fcb-all-checked { position: absolute; right: 14px; bottom: calc(100% + 2px); flex: 0 0 auto; min-width: 0; height: auto; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--color-bg-elevated); box-shadow: none; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; pointer-events: none; } .message-detail-panel .floating-confirm-bar .fcb-all-checked { color: var(--color-primary-dark); font-weight: var(--weight-bold); } .message-detail-panel .floating-confirm-bar .fcb-all-checked svg { width: 14px; height: 14px; }   .message-detail-panel:has(.thread-draft-banner) .floating-confirm-bar .fcb-all-checked { bottom: calc(100% + 34px); }   .message-detail-panel .floating-confirm-bar .fcb-all-checked-compact { display: none; }   .message-detail-panel .floating-confirm-bar .fcb-overdue { flex: 0 0 auto; order: -1;   font-size: 11px; }   .message-detail-panel .floating-confirm-bar .fcb-overdue { position: absolute; left: 14px; bottom: calc(100% + 2px); pointer-events: none; }   .message-detail-panel:has(.thread-draft-banner) .floating-confirm-bar .fcb-overdue { bottom: calc(100% + 34px); }   .message-detail-panel .floating-confirm-bar .fcb-spacer { display: none; }   .message-detail-panel .inhouse-quote-list { padding-bottom: 80px; }   .message-detail-panel:has(.thread-draft-banner) .floating-confirm-bar { padding-bottom: 0; height: 56px; } .message-detail-panel .thread-draft-banner { min-height: 44px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); font-size: 13px;   border-top: 1px solid var(--color-border-subtle, #eef0f3); background: var(--color-bg-elevated); }   .message-detail-panel .thread-draft-banner .draft-banner-sub { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .smail-comment-balloon { display: none; } }   @media (prefers-reduced-motion: reduce) { .message-detail-panel .floating-confirm-bar .fcb-check.is-busy::after { animation: none; } }   @media (max-height: 500px) and (pointer: coarse) { .compose-textarea { min-height: 4.5em; flex-shrink: 0; } .compose-panel { overflow-y: auto; }   body:has(.compose-textarea:focus) .app-topbar, body:has(.compose-textarea:focus) .compose-card-header, body:has(.compose-textarea:focus) .compose-inline-recipients, body:has(.compose-textarea:focus) .compose-bottom-menu, body:has(.compose-textarea:focus) .m-subject-title, body:has(.compose-textarea:focus) .mobile-detail-head {   display: none !important; }   body:has(.compose-textarea:focus) .ios-navbar { position: fixed; top: 4px; right: 4px; z-index: 20; min-height: 0; padding: 0; width: auto; background: transparent; border: 0; box-shadow: none; } body:has(.compose-textarea:focus) .ios-navbar .ios-nav-cancel, body:has(.compose-textarea:focus) .ios-navbar .ios-nav-title { display: none; } body:has(.compose-textarea:focus) .compose-textarea { padding-right: 84px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .inbox-mail-connect-hint { flex-wrap: wrap; } .inbox-mail-connect-hint .hint-text { flex: 1 1 65%; min-width: 0; } } 
/*css/screens/33-mobile-cabinet.css*/
      .cabinet-m-tabs, .cabinet-m-sort { display: none; } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .cabinet-project-panel, .cabinet-project-panel.collapsed { display: none; } .cabinet-main-area { min-width: 0; }   .cabinet-content-tabs { display: flex; padding: 0 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }   .cabinet-content-tab-btn { flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 6px; font-size: 11px; } .cabinet-content-tab-btn .tab-icon { width: 18px; height: 18px; }   .cabinet-content-tabs > .btn-icon { align-self: center; min-width: 40px; min-height: 40px; } .cabinet-content-tabs > div[style*="flex:1"] { flex: 0 0 0 !important;   }   .cabinet-content-tab { padding: 12px; } .cabinet-content-tab.settings-tab { padding: 12px; }   .cab-msgtab { flex-direction: column !important; overflow-y: auto !important; } .cab-msgtab-list { width: auto !important; border-right: 0 !important; overflow: visible !important; flex-shrink: 0; } .cab-msgtab-list > div { overflow: visible !important; } .cab-msgtab-list > div > div { min-height: 48px; } .cab-msgtab-detail { order: -1; flex: 0 0 auto !important; overflow: visible !important; } .cab-msgtab-detail:not(:empty) { border-bottom: 1px solid var(--color-border-default); } .cab-msgtab-detail > div { overflow: visible !important; padding: 12px !important; }   .cabinet-m-tabs { display: flex; gap: 2px; margin: 8px 12px 0; padding: 3px; border-radius: 12px; background: var(--color-bg-sunken); } .cabinet-m-tab { flex: 1 1 0; min-width: 0; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--color-text-secondary); font-size: 13px; } .cabinet-m-tab.is-on { background: var(--color-bg-base); color: var(--color-text-primary); font-weight: var(--weight-bold); box-shadow: 0 1px 3px rgba(16, 18, 24, .10); }   .theme-overview-bar { display: none; } .theme-overview-body { display: none; } .theme-overview-body.is-m-tab { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } .theme-overview-body.is-m-tab .theme-overview-card { width: 100%; }   .cabinet-file-tab.is-m-hidden { display: none; }   .cabinet-toolbar-search { order: -1; flex: 1 0 100%; width: 100%; } .cabinet-toolbar-search input { width: 100%;   font-size: 16px; }   .cabinet-preview-toggle, .cabinet-toolbar-sep { display: none; }   .cabinet-file-header { display: none; } .cabinet-m-sort { position: relative; display: block; flex: 0 0 auto; } .cabinet-m-sort-btn { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 1px solid var(--color-border-default); border-radius: 11px; background: var(--color-bg-base); color: var(--color-text-primary); font-size: 12.5px; white-space: nowrap; } .cabinet-m-sort-menu { top: 38px; left: 0; right: auto; min-width: 160px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .theme-quickfilter { overflow-x: auto; scrollbar-width: none; padding: 0 4px; } .theme-quickfilter::-webkit-scrollbar { display: none; } .theme-quickfilter-tab { flex-shrink: 0; white-space: nowrap; min-height: 44px; }     .theme-toolbar { gap: 8px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; } .theme-toolbar::-webkit-scrollbar { display: none; }   .theme-toolbar::after, .theme-quickfilter::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; align-self: stretch; pointer-events: none; background: linear-gradient(to right, transparent, var(--color-bg-sunken) 75%); } .theme-toolbar::after { margin-left: -8px; } .theme-search { flex: 0 0 200px; max-width: none; height: 40px; } .theme-search input { font-size: 16px; } .theme-toolbar-btn, .theme-add-btn { height: 40px; } .theme-viewswitch-btn { width: 40px; height: 40px; } .theme-toolbar-spacer { display: none;   } .theme-sort-item { min-height: 40px; }   .theme-sort-popup { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); width: auto; max-width: none; }   .theme-table-wrap { -webkit-overflow-scrolling: touch; } .theme-table th, .theme-table td { white-space: nowrap; } .theme-table td:first-child {   min-width: max(180px, 60vw); white-space: normal; } .theme-table td { padding: 12px 8px; }   .theme-cards { align-content: flex-start; } .theme-card { width: 100%; }   .theme-trash { padding: 0 12px 12px; } .theme-trash-restore { min-height: 40px; }   .theme-drilldown-head { gap: 4px; padding: 4px 8px; }   .theme-drilldown-headbody { flex-wrap: wrap; row-gap: 4px; padding: 4px 8px; } .theme-drilldown-titlewrap { flex: 1 1 auto; } .theme-drilldown-title { min-height: 44px; } .theme-drilldown-back {   min-width: 44px; height: 44px; white-space: nowrap; } .theme-drilldown-list, .theme-drilldown-delete, .theme-drilldown-fav { min-width: 44px; height: 44px; padding: 0 8px; }   .theme-drilldown-headbody { flex-wrap: wrap; row-gap: 4px; } .theme-drilldown-titlewrap { flex: 1 1 160px; }   .theme-drilldown-collapse { display: none; } .theme-overview-bar { min-height: 44px; padding: 6px 12px; } .theme-overview-body { padding: 8px 12px 10px; } .theme-overview-card { flex: 1 1 calc(50% - 4px); min-width: 0; } .theme-overview-card-note { max-width: 100%; }     .cabinet-breadcrumb { flex-wrap: wrap; row-gap: 6px; padding: 6px 8px; height: auto; min-height: 34px; } .cabinet-view-segment-btn, .cabinet-preview-toggle { min-height: 36px; padding: 3px 12px; } .cabinet-breadcrumb .btn-icon.btn-xs { min-width: 36px; min-height: 36px; } .cabinet-address-bar { flex: 1 1 100% !important;   min-height: 36px; }   .cabinet-address-bar.is-bare:not(:has(input)) { flex: 0 0 0 !important; min-width: 0; min-height: 0; padding: 0; border: 0; } .cabinet-address-search, .cabinet-address-path { font-size: 16px; } .cabinet-crumb { max-width: 140px; min-height: 32px; }     .cabinet-file-row { flex-wrap: wrap; row-gap: 2px; padding: 8px; min-height: 48px; } .cabinet-file-row .cabinet-col-name { min-width: 0; } .cabinet-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cabinet-file-checkbox { width: 20px; height: 20px; flex-shrink: 0; } .cabinet-file-row .cabinet-col-folder, .cabinet-file-row .cabinet-col-date, .cabinet-file-row .cabinet-col-type, .cabinet-file-row .cabinet-col-size { display: block; width: auto; padding: 0 6px 0 0; text-align: left; font-size: var(--font-xs); } .cabinet-file-row .cabinet-col-folder:empty, .cabinet-file-row .cabinet-col-date:empty, .cabinet-file-row .cabinet-col-size:empty { display: none; } .cabinet-file-row .cabinet-col-folder { max-width: 40%; }   .cabinet-file-row .cabinet-col-name { flex: 1 1 0; order: 0; } .cabinet-file-row .cabinet-col-actions { order: 1; } .cabinet-file-row::before { content: ""; order: 2; flex: 0 0 100%; height: 0; } .cabinet-file-row .cabinet-col-folder, .cabinet-file-row .cabinet-col-date, .cabinet-file-row .cabinet-col-type, .cabinet-file-row .cabinet-col-size { order: 3; }   .cabinet-file-row > .cabinet-col-name + * { margin-left: 30px; } .cabinet-file-row > .cabinet-col-folder:empty + .cabinet-col-date { margin-left: 30px;   }   .cabinet-file-row .cabinet-col-actions { opacity: 1; width: auto; gap: 0; } .cabinet-file-row .cabinet-btn-action { width: 36px; height: 36px; } .cabinet-rename-input { font-size: 16px; }   .cabinet-file-header { overflow-x: auto; scrollbar-width: none; } .cabinet-file-header .cabinet-col-name { flex: 1 0 auto; white-space: nowrap; } .cabinet-file-header .cabinet-col-name, .cabinet-file-header .cabinet-col-folder, .cabinet-file-header .cabinet-col-date, .cabinet-file-header .cabinet-col-type, .cabinet-file-header .cabinet-col-size { display: block; width: auto; min-height: 36px; line-height: 28px; white-space: nowrap; } .cabinet-file-header .cabinet-col-actions { width: 0;   }   .cabinet-file-area:not(.is-cross-theme) > .cabinet-folder-panel, .cabinet-file-area:not(.is-cross-theme) > .panel-splitter.vertical { display: none; } .cabinet-file-area, .cabinet-file-area.flipped { display: block; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cabinet-file-area.is-cross-theme > .cabinet-folder-panel { width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--color-border-default); } .cabinet-tree-item { min-height: 40px; } .cabinet-overflow-item { min-height: 40px; } .cabinet-file-content, .cabinet-file-content.cabinet-dual-pane, .cabinet-file-area .cabinet-file-panel { display: block; overflow: visible; } .cabinet-file-area .cabinet-file-list { overflow: visible; }   .cabinet-file-content.cabinet-dual-pane > .cabinet-file-panel { border-right: 0; border-bottom: 1px solid var(--color-border-default); }   .cabinet-pdf-slide { position: fixed; top: var(--topbar-height);   left: 0; right: 0; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); width: auto; min-width: 0; max-width: none; z-index: var(--z-modal); } .cabinet-pdf-slide-header { flex-wrap: wrap; row-gap: 4px; min-height: 48px; } .cabinet-pdf-slide-header .btn-xs { min-height: 36px; } .cabinet-pdf-slide-header .btn-icon.btn-xs { min-width: 40px; min-height: 40px; } .cabinet-preview-keep-hint-ok, .cabinet-preview-notice-action { min-height: 40px; }   .cabinet-main-area { position: relative; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .cabinet-pdf-slide.cabinet-preview-empty { position: static; width: auto; box-shadow: none; border-top: 1px solid var(--color-border-default); animation: none; }   .cabinet-pdf-slide.cabinet-preview-notice { top: auto; max-height: 50dvh; overflow-y: auto; border-top: 1px solid var(--color-border-default); box-shadow: var(--shadow-lg); }   .cabinet-ctx-menu { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); min-width: 0; max-height: 60dvh; z-index: 1150;   -webkit-overflow-scrolling: touch; } .cabinet-ctx-menu .cabinet-ctx-item { min-height: 44px; }   .cabinet-overflow-dropdown { left: auto; right: 0; max-width: calc(100vw - 24px); } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .pdf-landing-row-main, .pdf-landing-row-del, .pdf-landing-clear { min-height: 44px; } .pdf-landing-row-del { min-width: 40px; } .sp-pdf-editor { min-height: 0; } .sp-pdf-bar { gap: 4px; padding: 4px 6px; } .sp-pdf-name { max-width: 100%; }   .sp-pdf-bar-left, .sp-pdf-bar-center, .sp-pdf-bar-right { flex-wrap: wrap; min-width: 0; } .sp-pdf-bar-right { justify-content: flex-start; } .sp-pdf-iconbtn { min-width: 40px; min-height: 40px; justify-content: center; } .sp-pdf-textbtn { min-height: 40px; }   .sp-pdf-thumbs { width: 76px; padding: 4px; } .sp-pdf-pages { padding: 8px 4px; }   .sp-pdf-menu, .sp-pdf-menu-wide, .sp-pdf-history { position: fixed; top: auto; left: 8px; right: 8px; width: auto; min-width: 0; max-height: 60dvh; overflow-y: auto; } .sp-pdf-menurow { min-height: 44px; } .sp-pdf-history-del { width: 40px; height: 40px; } .sp-pdf-findbar { flex-wrap: wrap; } .sp-pdf-findinput { flex: 1 1 100px; width: auto; min-width: 0; font-size: 16px; } .sp-pdf-dialog { padding: 16px; } .sp-pdf-dialog-input, .sp-pdf-bookmark-title, .sp-pdf-bookmark-pageinput { font-size: 16px; } .sp-pdf-dialog-presets { flex-wrap: wrap; } .sp-pdf-dialog-ok, .sp-pdf-dialog-cancel, .sp-pdf-preset { min-height: 40px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .docsearch { min-height: 0; } .docsearch-head { flex-wrap: wrap; } .docsearch-move-toggle { min-height: 40px; } .docsearch-body { flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .docsearch-left { flex: 0 0 auto; } .docsearch-results { flex: 0 0 auto; overflow: visible; } .docsearch-right { flex: 0 0 auto; min-height: 60dvh; } .docsearch-box { height: 44px; } .docsearch-input, .docsearch-move-filter-input { font-size: 16px; } .docsearch-card { min-height: 48px; } .docsearch-tree-row { min-height: 40px; } .docsearch-tree-expander { width: 32px; height: 32px; } .docsearch-move { margin: -12px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .cabinet-dialog { min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 136px); overflow-y: auto; padding: 16px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .cabinet-dialog input[type="text"],.cabinet-dialog input[type="search"],.cabinet-dialog input:not([type]),.cabinet-dialog select,.cabinet-dialog textarea{ font-size: 16px; } .cabinet-dialog-actions { flex-wrap: wrap; } .cabinet-btn-ok, .cabinet-btn-cancel, .cabinet-btn-small, .cabinet-btn-danger-sm { min-height: 40px; } .cabinet-dialog-close { min-width: 40px; min-height: 40px; }   .member-management-dialog { overflow-x: auto; } .member-table td:first-child { white-space: nowrap; } .member-table th, .member-table td { padding: 6px; } .member-role-inline, .member-role-select { width: auto; min-width: 96px; min-height: 36px; font-size: 16px; } .keyword-add-row > input { flex: 1 1 100%; } .member-search-row,.keyword-add-row{ flex-wrap: wrap; }   .tcfg-dialog { width: calc(100vw - 24px); padding: 0; overflow: hidden;   } .tcfg-body { padding: 16px; }   .tcfg-dialog > .cabinet-dialog-actions { margin-top: 0; padding: 12px 16px 16px; } .tcfg-head { padding: 12px 16px; } .tcfg-head-btn { width: 40px; height: 40px; }   .xtr-dialog, .sa2-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 136px); } .xtr-body { flex-direction: column; overflow-y: auto; } .xtr-col-left, .xtr-col-right { flex: 0 0 auto; } .xtr-pages { overflow: visible; } .xtr-page { width: calc(50% - 5px); } .xtr-name-input { font-size: 16px; } .sa2-dialog .modal-body, .sa2-body { padding: 12px; overflow-y: auto; } .sa2-cols { flex-direction: column; gap: 16px; } .sa2-form { gap: 16px; } .sa2-preview { width: auto; flex: 0 0 auto; } .sa2-input, .sa2-select { font-size: 16px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .theme-filter-host { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); width: auto; max-width: none; } .theme-filter-panel { max-height: 70dvh; } .theme-filter-section { width: 100%; } .theme-filter-item { min-height: 36px; } .theme-filter-search { height: 40px; } .theme-filter-search input, .theme-filter-saved-form input { font-size: 16px; } .theme-filter-saved-form input { height: 36px; } .theme-filter-combine-btn, .theme-filter-saved-apply, .theme-filter-saved-ok, .theme-filter-saved-cancel, .theme-filter-clear-all, .theme-filter-section-clear { min-height: 36px; }   .docsearch-right:has(> .docsearch-preview-idle) { min-height: 0; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .theme-statusbar { flex-wrap: wrap; gap: 4px 14px; height: auto; padding: 6px 12px; } .theme-statusbar-count, .theme-statusbar-item { white-space: nowrap; }   .theme-statusbar-item { flex-wrap: wrap; max-width: 100%; } .theme-statusbar-track { width: 40px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .cabinet-ctx-menu .ctx-shortcut, .cabinet-ctx-menu [data-testid=CabinetContextCopyPath], .cabinet-ctx-menu [data-testid=CabinetContextSendToDownloads] { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .theme-toolbar { overflow: visible; } .theme-toolbar::after { display: none; } .theme-toolbar .theme-search { flex: 1 1 auto; min-width: 0; } .theme-mtools { display: flex; flex: 0 0 auto; gap: 8px; } .theme-mtools-btn { width: 44px; height: 44px; padding: 0; justify-content: center; } .theme-sort-item.theme-mtools-filter { border-bottom: 1px solid var(--color-border-default); margin-bottom: 4px; } .theme-mlist { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 12px 12px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; } .theme-mrow { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 4px 8px 12px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; } .theme-mrow .theme-table-avatar { flex: 0 0 32px; width: 32px; height: 32px; margin-right: 0; } .theme-mrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .theme-mrow-title { display: flex; align-items: center; min-width: 0; color: var(--color-text-primary); font-size: var(--font-md); } .theme-mrow-title .theme-table-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-mrow-title > :not(.theme-table-name) { flex: 0 0 auto; } .theme-mrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--color-text-tertiary); font-size: var(--font-xs); } .theme-mrow-cat { display: inline-flex; align-items: center; }   .theme-mrow .theme-mrow-fav { flex: 0 0 44px; width: 44px; height: 44px; margin-left: 0; visibility: visible; } .theme-statusbar:not(.is-open) .theme-statusbar-item { display: none; } .theme-statusbar-more { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; margin-left: -8px;   padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-secondary); } } 
/*css/screens/34-mobile-mailroom.css*/
      @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .feature-page:has(.rt-filter-card) { padding: 10px 12px 8px; } .feature-page:has(.rt-filter-card) .feature-header { margin-bottom: 8px; } .feature-page:has(.rt-filter-card) .feature-header h2 { font-size: var(--font-lg); margin: 0; }   .rt-filter-card { padding: 8px; margin-bottom: 6px; } .rt-filter-row1 { gap: 6px; }   .rt-search { flex: 1 1 180px; min-width: 0; height: 44px; }   .rt-search .rt-search-input { background: transparent; min-height: 0; height: 100%; }   .rt-filter-row2 { flex-wrap: wrap; row-gap: 6px; }   .rt-detail-empty { display: none; }   .rt-search-input, .rt-date-range input, .rt-sort-select, .rt-filter-select, .rt-tracking-input, .rt-assignee-select, .rt-bulk-select, .rt-carrier-select { font-size: 16px; } .rt-search-clear, .rt-search-help { width: 32px; height: 32px; } .rt-date-toggle { min-height: 40px; } .rt-date-range { flex-wrap: wrap; } .rt-preset-btn, .rt-primary-btn { flex: 1 1 28%; min-width: 0; height: 40px; padding: 4px 8px; white-space: nowrap; }   .rt-filter-row2 { margin-top: 6px; gap: 6px; flex-wrap: nowrap; align-items: center; }   .rt-filter-row2 .rt-genre-label { display: none; } .rt-count-badge { flex: 0 0 auto; white-space: nowrap; }   .rt-count-pending { min-width: 44px; min-height: 20px; border-radius: 6px; background: var(--color-bg-sunken); } .rt-filter-actions { flex: 1 1 auto; margin-left: auto; gap: 6px; justify-content: flex-end; min-width: 0;   flex-wrap: wrap; row-gap: 6px; }   .rt-filter-actions .rt-filter-btn, .rt-filter-actions .rt-bulk-toggle { flex: 0 0 auto; min-width: 44px; padding-inline: 10px; } .rt-filter-btn, .rt-bulk-toggle { height: 40px; white-space: nowrap; flex: 0 0 auto; } .rt-sort-select { flex: 1 1 auto; min-width: 0; height: 40px;   padding-right: 26px; text-overflow: ellipsis; } .rt-active-chip { min-height: 32px; } .rt-chip-clear { width: 28px; height: 28px; }   .rt-filter-actions .rt-menu-anchor { position: static; } .rt-filter-card { position: relative; } .rt-filter-popup { left: 0; right: 0; width: auto; min-width: 0;   max-height: calc(100dvh - 340px - env(safe-area-inset-bottom)); overflow-y: auto; } .rt-filter-key { width: 100%; } .rt-genre-chip, .rt-scope-chip { height: 40px; white-space: nowrap; } .rt-filter-select { height: 40px; min-width: 0; } .rt-filter-check { min-height: 36px; }   .tracking-layout { flex-direction: column; gap: 8px; min-height: 0; } .tracking-list { width: auto; flex: 1 1 auto; min-height: 0; overflow-x: hidden; }   .tracking-detail { flex: 0 0 auto; min-height: 0; padding: 12px; }   .tracking-layout:not(:has(.tracking-detail-header, .rt-bulk-form, .rt-detail-loading)) .tracking-detail { display: none; }   .tracking-layout:has(.tracking-detail-header, .rt-detail-loading) .tracking-list { display: none; } .tracking-layout:has(.tracking-detail-header, .rt-detail-loading) .tracking-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   .rt-detail-back { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin-left: -8px; } .tracking-detail-header { gap: 4px; }   .tracking-layout:has(.rt-bulk-form) .tracking-list { flex: 0 0 auto; max-height: 45%; } .tracking-layout:has(.rt-bulk-form) .tracking-detail { flex: 1 1 0; overflow-y: auto; padding: 0; }   .tracking-item { padding: 10px; min-height: 44px; } .rt-card { gap: 10px; } .rt-thumb { flex: 0 0 48px; width: 48px; height: 60px; } .rt-thumb-canvas { width: 48px; height: 60px; } .rt-thumb-render { width: 180px; } .rt-thumb-fallback-icon { width: 16px; height: 16px; } .rt-thumb-fallback-text { font-size: 10px; } .tracking-item-row1 { min-width: 0; } .rt-elapsed-days, .tracking-item-time { white-space: nowrap; flex: 0 0 auto; } .tracking-item-row3 { flex-wrap: wrap; row-gap: 2px; } .tracking-item-event { min-width: 0; } .rt-track-list.is-bulk .tracking-item { padding-left: 44px; }   .rt-track-list .rt-context-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom)); min-width: 0; z-index: 1150; } .rt-context-menu > button { min-height: 44px; } .rt-bulk-status { flex-wrap: wrap; } .rt-ghost-btn { min-height: 40px; } .rt-count-line { flex-wrap: wrap; padding: 0 4px 6px; }     .tracking-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .tracking-detail-header h3 { flex: 1 1 auto; min-width: 0; margin: 8px 0 0; overflow-wrap: anywhere; font-size: var(--font-md); } .tracking-detail .rt-icon-btn { min-width: 40px; min-height: 40px; } .tracking-detail-header .rt-context-menu { position: absolute; left: auto; right: 0; top: 100%; width: max-content; max-width: calc(100vw - 48px); } .rt-tracking-head, .rt-tracking-set, .rt-tracking-edit, .rt-proxy-row, .rt-escalation { flex-wrap: wrap; } .rt-tracking-number { overflow-wrap: anywhere; } .rt-setnone-row, .rt-proxy-toggle, .rt-proxy-ack, .rt-save-btn, .rt-track-cta, .rt-link-btn, .rt-escalation-link, .rt-person-chip, .rt-pill-btn { min-height: 40px; } .rt-assignee-select, .rt-bulk-select, .rt-carrier-select, .rt-tracking-input { min-height: 40px; } .rt-pill { max-width: 100%; } .rt-pdf-btn { height: 44px; }   .rt-pdf-overlay { position: fixed; top: var(--topbar-height); left: 0; right: 0; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); border-radius: 0; } .rt-pdf-toolbar .btn-sm, .rt-pdf-toolbar .btn-close-detail { min-width: 44px; min-height: 40px; }   .rt-bulk-form { padding: 12px; } .rt-bulk-apply { min-height: 36px; } .rt-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; } .rt-bulk-actions .rt-primary-btn, .rt-bulk-actions .rt-ghost-btn { flex: 1 1 auto; height: 44px; }   .rt-al-panel { width: 100vw; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); border-left: 0; z-index: 1150; } .rt-al-overlay { z-index: 1149; } .rt-al-body { flex-direction: column; overflow-y: auto; } .rt-al-left { width: 100%; flex: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--color-border-default); } .rt-al-right { flex: none; min-height: 420px; } .rt-al-close, .rt-al-qty-btn, .rt-al-item-remove { min-width: 40px; min-height: 40px; } .rt-al-preset { font-size: 16px; min-height: 40px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .shipping-create { height: 100%; min-height: 0; } .scr-head { padding: 12px 14px 10px; gap: 8px; } .scr-head h1 { font-size: var(--font-lg); } .scr-close { flex: 0 0 auto; } .scr-body { padding: 4px 10px 10px; } .scr-sec { padding: 14px 12px; } .scr-sec-head { gap: 8px; } .scr-t { min-width: 0; } .scr-badge { flex: 0 0 auto; white-space: nowrap; } .scr-select, .scr-search, .scr-manual-doc-input, .shipping-field input, .shipping-field select, .shipping-field textarea { font-size: 16px; } .scr-link, .scr-add, .scr-change, .scr-link-btn, .scr-recent-item { display: inline-flex; align-items: center; min-height: 40px; } .scr-dd-item { min-height: 44px; } .scr-drop { padding: 16px; } .btn-remove-item { min-width: 36px; min-height: 36px; } .shipping-radio-group { flex-wrap: wrap; } .shipping-radio { min-height: 44px; } .scr-foot { padding: 8px 12px 10px; } .scr-status { flex-wrap: wrap; } .scr-cta { min-height: 48px; }   .ship-intro { width: calc(100vw - 32px); max-width: 420px; max-height: calc(100% - 24px); overflow-y: auto; padding: 22px 20px; } .ship-intro-ic { width: 56px; height: 56px; margin-bottom: 10px; } .ship-intro-ic svg { width: 28px; height: 28px; } .ship-intro-title { font-size: 20px; } .ship-intro-sub { margin-bottom: 16px; } .ship-intro-step { margin-bottom: 12px; } .ship-intro-btn { height: 48px; }   .shipping-header { gap: 8px; padding: 10px 12px; } .shipping-header-title { min-width: 0; font-size: var(--font-md); } .shipping-header .btn-close-detail { min-width: 44px; min-height: 44px; } .shipping-form { padding: 10px 10px 16px; }   .com-panel { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 16px - env(safe-area-inset-bottom)); top: calc(var(--topbar-height) + 8px); transform: translateX(-50%); } .com-mention-input, .com-body-text, .com-project-title { font-size: 16px; } .com-actions { flex-wrap: wrap; } .com-actions button, .com-pager-btn, .com-pill-name, .com-pill-remove, .com-link { min-height: 40px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .main-content > .feature-page:has(.mailimport) { padding: 10px 12px 16px; overflow-y: auto; } .feature-page:has(.mailimport) > * { flex-shrink: 0; } .feature-page:has(.mailimport) .feature-header { margin-bottom: 6px; } .feature-page:has(.mailimport) .feature-header h2 { font-size: var(--font-lg); margin: 0; } .mailimport-tab { min-height: 44px; } .mailimport-address-row { flex-wrap: wrap; } .mailimport-address { min-width: 0; overflow-wrap: anywhere; } .mailimport-copy, .mailimport-send, .mailimport-file-clear { min-height: 44px; } .mailimport-file-clear { min-width: 44px; } .mailimport-guide-link { display: inline-block; padding: 8px 0; } .mailimport-drop { padding: 24px 12px; } .mailimport-qr-url { overflow-wrap: anywhere; }   .mailimport-corrector-overlay { top: var(--topbar-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 0; } .mailimport-corrector { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; } .mailimport-corrector-head { padding: 10px 12px; } .mailimport-corrector-actions { flex-wrap: wrap; gap: 8px; padding: 10px 12px; } .mailimport-corrector-actions button { flex: 1 1 0; min-height: 48px; }   .scanner-overlay { height: 100dvh; z-index: 1400; } .scanner-header { padding: max(8px, env(safe-area-inset-top)) 12px 8px; gap: 8px; } .scanner-btn-cancel, .scanner-btn-done { min-height: 44px; min-width: 72px; } .scanner-header .page-count { white-space: nowrap; } .scanner-controls { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); } .scanner-btn-capture { width: 72px; height: 72px; } .scanner-review img { max-width: calc(100% - 24px); max-height: 60vh; } .scanner-review-actions button { min-height: 48px; min-width: 120px; } .scanner-thumbs img { width: 44px; height: 58px; } } 
/*css/screens/35-mobile-work.css*/
    @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .main-content > .feature-page:has(.tr-header-actions, .tr-schedule), .main-content > .feature-page:has(> .todo-stats-header), .main-content > .feature-page:has(> .contact-toolbar) { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 24px; } .main-content > .feature-page:has(.tr-header-actions, .tr-schedule) > *, .main-content > .feature-page:has(> .todo-stats-header) > *, .main-content > .feature-page:has(> .contact-toolbar) > * { flex-shrink: 0; } .main-content > .perf-page { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 24px; }   .main-content > .feature-page:has(.tr-header-actions) > .feature-header, .main-content > .feature-page:has(> .contact-toolbar) > .feature-header { margin-bottom: 10px; }   .feature-page:has(.tr-header-actions, .tr-schedule) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .feature-page:has(> .todo-stats-header) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .feature-page:has(> .contact-toolbar) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .contact-detail-modal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .perf-page :is(input, select) { font-size: 16px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .tr-header-actions { width: 100%; gap: 0; } .tr-header-action { min-height: 40px; min-width: 32px; padding: 0 3px; justify-content: center; font-size: 11px; }   .tr-input-column { max-width: none; width: 100%; min-width: 0; }   .tr-time-card { flex-wrap: wrap; row-gap: 6px; } .tr-time-fields { order: 1; flex: 1 1 100%; justify-content: center; gap: 8px;   flex-wrap: wrap; max-width: 100%; }   .tr-time-input { width: auto; min-width: 104px; width: calc(5ch + 2.6em); min-height: 40px; height: auto; }   .tr-mode-tabs { flex-direction: column; align-items: stretch; gap: 4px; } .tr-mode-tab { min-height: 44px; display: inline-flex; align-items: center;   white-space: nowrap; flex: 0 0 auto; } .tr-mode-tabs { justify-content: safe flex-end; overflow-x: auto; scrollbar-width: none; } .tr-chip { min-height: 36px; max-width: 100%; } .tr-gap-record, .tr-row-menu { min-width: 40px; min-height: 36px; } .tr-context-menu > button { min-height: 40px; }   .main-content > .feature-page.tr-page-fullbleed { padding: 0 0 24px; } .tr-schedule { flex: 0 0 auto; } .tr-schedule-hero { padding: 10px 12px 10px 16px; gap: 10px; } .tr-schedule-hero-icon { width: 22px; height: 22px; } .tr-schedule-hero-close { width: 40px; height: 40px; } .tr-page-fullbleed .tr-schedule-bar, .tr-page-fullbleed .tr-list-toolbar, .tr-page-fullbleed .tr-list { margin-left: 12px; margin-right: 12px; } .tr-page-fullbleed .tr-legend { margin-left: 12px; margin-right: 12px; } .tr-page-fullbleed .tr-record-list, .tr-page-fullbleed .tr-list-group, .tr-page-fullbleed .tr-event-detail, .tr-page-fullbleed .tr-edit-panel, .tr-page-fullbleed > .tr-schedule > .tr-empty { margin-left: 12px; margin-right: 12px; }   .tr-schedule-bar { flex-wrap: wrap; row-gap: 8px; } .tr-schedule-nav { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; row-gap: 4px; } .tr-today-btn { height: 40px; }   .tr-icon-btn { width: auto; min-width: 40px; height: auto; min-height: 40px; } .tr-date-jump { font-size: var(--font-md); min-height: 40px; min-width: 0; white-space: normal; text-align: left; } .tr-schedule-center { flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .tr-pill { min-height: 36px; flex: 0 0 auto; } .tr-member-picker { flex: 0 0 auto; height: 40px; } .tr-member-picker .tr-member-select { height: 38px; } .tr-schedule-right { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; gap: 8px; } .tr-seg-btn { min-height: 36px; } .tr-upper-config-btn { min-height: 36px; } .tr-schedule-right .tr-overflow { margin-left: auto; min-width: 44px; }   .tr-overflow-popup, .tr-template-popup, .tr-google-popup, .tr-column-popup { position: fixed; top: calc(var(--topbar-height) + 8px); left: 8px; right: 8px; min-width: 0; max-width: none; max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 24px - env(safe-area-inset-bottom)); overflow-y: auto; } .tr-tool-chip { min-height: 40px; } .tr-overflow-row { flex-wrap: wrap; row-gap: 6px; } .tr-date-jump-popup { left: 12px; right: 12px; }   .tr-calendar { margin: 4px 12px; min-height: 0; } .tr-grid-body { flex: 0 0 auto; height: 60vh; height: 60dvh; min-height: 320px; }   .tr-grid-ruler-head, .tr-grid-ruler { flex-basis: 60px; } .tr-grid-ruler-cell > span { padding-left: 2px; font-size: var(--font-2xs); white-space: nowrap; }   .tr-grid:has(.tr-grid-dayhead:nth-child(4)) { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .tr-grid:has(.tr-grid-dayhead:nth-child(4)) > * { flex-shrink: 0; min-width: calc(52px + 7 * 64px); } .tr-grid-allday-col .tr-cal-chip { flex-wrap: wrap; gap: 2px; padding: 2px 4px; } .tr-cal-chip .tr-cal-badge, .tr-grid-chip .tr-cal-badge, .tr-grid-chip .tr-cal-time { white-space: nowrap; } .tr-grid-allday-col .tr-cal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .tr-empty-overlay .tr-empty-sub { padding: 0 12px; text-align: center; }   .tr-month-body { grid-auto-rows: minmax(64px, auto); } .tr-month-cell { min-width: 0; padding: 2px; } .tr-month-chip { padding: 0 2px; }     .tr-fab { position: fixed; right: 12px; bottom: calc(var(--mobile-nav-height, 0px) + env(safe-area-inset-bottom) + 12px); z-index: var(--z-dropdown); width: 48px; height: 48px; } .tr-add-menu { position: fixed; right: 12px; bottom: calc(var(--mobile-nav-height, 0px) + env(safe-area-inset-bottom) + 68px); width: min(260px, calc(100vw - 48px)); } .tr-add-row { min-height: 48px; }   .tr-calendar:has(> .tr-event-detail) > .tr-event-detail:last-of-type { margin-bottom: 72px; }   .tr-legend-chip { min-height: 36px; }   .tr-event-detail-meta { flex-wrap: wrap; row-gap: 2px; } .tr-popup-close { min-width: 40px; min-height: 40px; }   .tr-list-toolbar { row-gap: 8px; } .tr-field-chip { min-height: 36px; } .tr-search { flex: 1 1 100%; min-width: 0; height: 44px; } .tr-search-input { height: 40px; } .tr-record-card { padding: 10px 12px; }   .tr-record-time { flex: 1 1 100%; min-width: 0; min-height: 36px; } .tr-record-sep { display: none;   } .tr-record-field input, .tr-record-field select { min-height: 36px; }   .tr-edit-panel .form-row { flex-direction: column; gap: 0; } .tr-edit-foot { flex-wrap: wrap; } .tr-edit-foot .btn-primary, .tr-edit-foot .btn-secondary { flex: 1 1 auto; min-height: 44px; }   .feature-page:has(.tr-schedule, .tr-header-actions) .modal-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 24px); } .feature-page:has(.tr-schedule, .tr-header-actions) .modal-dialog .form-row { flex-direction: column; gap: 0; } .feature-page:has(.tr-schedule, .tr-header-actions) .modal-footer { flex-wrap: wrap; } .tr-candidates .modal-body { min-width: 0; } .tr-upper-item-btn { flex-wrap: wrap; min-height: 44px; }   .tr-report-bar { row-gap: 8px; } .tr-report-bar .btn-primary, .tr-report-bar .btn-secondary { min-height: 40px; padding: 0 14px; } .tr-report-bar .tr-member-select { flex: 1 1 100%; height: 44px; } .tr-report-bar input[type="date"] { flex: 1 1 130px; min-width: 130px; min-height: 40px; } .tr-report-nav { flex-wrap: nowrap; } .tr-report-nav .tr-period-label { flex: 1 1 auto; min-width: 0; font-size: var(--font-sm); text-align: center; }   .tr-notice { flex-wrap: wrap; } .tr-notice textarea { flex: 1 1 100%; min-width: 0; } .tr-notice-actions { flex: 1 1 100%; justify-content: flex-end; } .tr-notice-actions > button { min-height: 44px; white-space: nowrap; }   .feature-page:has(.tr-header-actions) .modal-body > input[type="text"], .feature-page:has(.tr-header-actions) .modal-body > textarea { width: 100%; box-sizing: border-box; min-height: 40px; } .tr-group-target-head { flex-wrap: wrap; } .tr-group-target-head button { min-height: 36px; }   .tr-report-kpis { grid-template-columns: 1fr; gap: 12px; }   .tr-report-theme-row { grid-template-columns: minmax(0, 1fr) 56px 40px; } .tr-report-theme-track { display: none; } .tr-chart-metrics { flex-wrap: wrap; gap: 8px 16px; } .tr-ratio-name { width: 96px; } .tr-chart-title { font-size: var(--font-md); }   .tr-approval .feature-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tr-approval .tr-approval-grid { min-width: 720px; } .tr-approval .tr-approval-grid thead { display: table-header-group; } .tr-approval .tr-approval-grid tbody tr { display: table-row; padding: 0; } .tr-approval .tr-approval-grid tbody td { padding: 8px 8px; border-bottom: 1px solid var(--color-border-default); white-space: nowrap; } .tr-approval-title { font-size: var(--font-lg); } .tr-approval-filter input[type="date"] { flex: 1 1 130px; min-width: 130px; min-height: 40px; } .tr-approval-filter .btn-primary, .tr-approval-filter .btn-secondary { min-height: 40px; } .tr-approval .tr-link-btn, .tr-approval .tr-row-menu { min-height: 36px; } .tr-edition-tab { min-height: 40px; } .tr-approval-select { min-height: 36px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {     .todo-stats-header .todo-sidebyside-btn, .todo-chip-bar .todo-title-search { display: none; } .todo-stats-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 12px 14px; } .todo-stats-row { justify-content: flex-end; gap: 14px; min-width: 0;   flex-wrap: wrap; row-gap: 6px; } .todo-stats-item { flex: 0 0 auto; } .todo-stats-lbl { display: block; white-space: nowrap; font-size: 11px; } .todo-sidebyside-btn, .todo-create-btn { justify-content: center; min-height: 40px; margin: 0; }   .todo-sort-bar { flex-wrap: nowrap; overflow-x: auto; padding-left: 0; margin-left: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .todo-sort-bar::-webkit-scrollbar { display: none; }   .todo-sort-bar::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; align-self: stretch; margin-left: -8px; pointer-events: none; background: linear-gradient(to right, transparent, var(--color-bg-sunken) 75%); } .todo-sort-chip, .todo-chip, .todo-cond, .todo-timeline-seg { flex: 0 0 auto; min-height: 36px; white-space: nowrap; } .todo-chip-bar { gap: 6px; }   .todo-search-inline { flex: 1 1 100%; margin-left: 0; } .todo-search-inline input, .todo-search-inline input:focus { width: 100%; min-height: 40px; padding-left: 30px; } .todo-title-search { flex: 1 1 100%; width: 100%; min-height: 40px; } .todo-more-search { margin: 0 0 8px; padding: 10px 12px; } .todo-prio-hint { padding: 0 0 8px; } .todo-cond-list { flex-wrap: wrap; }   .todo-list-col { overflow: visible; min-height: 0; } .todo-list { overflow: visible; } .todo-card-body { padding: 10px 12px; } .todo-card-title { font-size: var(--font-base); white-space: normal; overflow-wrap: anywhere; } .todo-card-info { flex-wrap: wrap; row-gap: 4px; }   .todo-layout:has(> .todo-detail-panel) > .todo-list-col { display: none; } .todo-layout { min-height: 0; } .todo-detail-panel { overflow: visible; } .todo-detail-head .btn-sm, .todo-detail-head .btn-close-detail { min-width: 44px; min-height: 40px; } .todo-detail-head h3 { min-width: 0; overflow-wrap: anywhere; } .todo-progress-btns { flex-wrap: wrap; } .btn-progress { flex: 1 1 0; min-height: 40px; font-size: var(--font-sm); } .todo-detail-grid .detail-row { align-items: flex-start; font-size: var(--font-sm); } .todo-detail-grid .detail-row > span:last-child { min-width: 0; overflow-wrap: anywhere; } .rank-star { font-size: 18px; } .remark-input { flex-direction: column; } .remark-input .btn-primary { align-self: stretch; min-height: 44px; } .btn-icon-sm, .btn-remark-delete { min-width: 36px; min-height: 36px; } .todo-detail-footer .btn-danger { min-height: 44px; }   .feature-page:has(> .todo-stats-header) .modal-dialog { width: calc(100vw - 16px);   max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 16px - var(--host-bottom-inset, 0px)); top: calc(50% - var(--host-bottom-inset, 0px) / 2); } .todo-config { overflow-y: auto; }   .todo-config > .todo-config-footer { position: sticky; bottom: 0; z-index: 1; background: var(--color-bg-base); } .todo-config-titlebar { flex-wrap: wrap; row-gap: 6px; } .todo-config-title-wrap { flex: 1 1 200px; min-width: 0; } .btn-rank-star { min-width: 36px; min-height: 36px; } .todo-meta-chips { flex-wrap: wrap; } .todo-meta-chip { max-width: 100%; flex-wrap: wrap; } .todo-deadline-head { flex-wrap: wrap; min-height: 44px; } .todo-dl-row { flex-wrap: wrap; row-gap: 6px; } .todo-seg-chips { flex-wrap: wrap; } .todo-seg-chip, .todo-dl-set { min-height: 36px; } .todo-config-footer { flex-wrap: wrap; gap: 8px; } .todo-config-footer .btn-primary, .todo-config-footer .btn-secondary, .todo-config-footer .btn-danger-outline { min-height: 44px; }   .feature-page:has(> .todo-stats-header) .todo-esc-hint { flex-basis: 100%; order: -1; font-size: var(--font-2xs); }   .feature-page:has(> .todo-stats-header) .modal-footer { flex-wrap: wrap; align-items: center; } .feature-page:has(> .todo-stats-header) .modal-footer > button { min-height: 44px; white-space: nowrap; } .feature-page:has(> .todo-stats-header) .modal-body textarea { width: 100%; box-sizing: border-box; }   .todo-prio-board { top: var(--topbar-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); width: 100vw; border-left: 0; } .todo-prio-head .btn-close-detail { min-width: 44px; min-height: 44px; } .todo-prio-person { min-height: 36px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .main-content > .feature-page:has(> .contact-toolbar) > .feature-header .header-actions { flex: 1 1 auto; justify-content: flex-end; gap: 6px; } .main-content > .feature-page:has(> .contact-toolbar) > .feature-header .header-actions > button { min-height: 44px;   padding: 0 14px; font-size: var(--font-sm); } .contact-toolbar { width: 100%; }   .contact-toolbar .contact-search { flex: 1 1 100%; max-width: none; } .contact-toolbar .contact-search input { min-height: 44px; }   .contact-list-item { flex-wrap: wrap; row-gap: 2px; min-height: 56px; } .contact-list-info { flex: 1 1 0; min-width: 0; } .contact-list-name, .contact-list-email { overflow: hidden; text-overflow: ellipsis; } .contact-list-voice { order: 5; flex: 1 1 100%; max-width: none; padding-left: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact-action-btn { min-width: 40px; min-height: 40px; } .contact-unorganized-head { flex-wrap: wrap; min-height: 44px; } .contact-unorganized-item { flex-wrap: wrap; } .contact-unorganized-register, .contact-unorganized-dismiss { min-height: 36px; min-width: 56px; }   .contact-detail-modal, .contact-detail-modal.cd-modal-640 { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 16px); } .contact-detail-header { padding: 14px 14px 10px; gap: 10px; } .contact-detail-title { min-width: 0; } .contact-detail-title h3 { overflow-wrap: anywhere; } .contact-detail-modal .btn-close-detail { min-width: 44px; min-height: 44px; } .contact-detail-body { padding-left: 14px; padding-right: 14px; } .contact-detail-modal .form-row { flex-direction: column; gap: 0; } .contact-detail-modal .btn-sm, .cc-add-link { min-height: 36px; }   .cc-copy-btn { opacity: 1; min-width: 36px; min-height: 36px; } .cc-view-item { flex-wrap: wrap; } .cc-edit-row { flex-wrap: wrap; } .contact-detail-email { overflow-wrap: anywhere; } .candidate-item { min-height: 40px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .perf-title { font-size: var(--font-lg); margin-bottom: 10px; } .perf-toolbar { gap: 8px; }   .perf-period-buttons { flex: 1 1 calc(100% - 64px); } .perf-period-btn { flex: 1 1 0; min-height: 40px; font-size: var(--font-sm); } .perf-date { flex: 1 1 130px; min-width: 130px; min-height: 40px; } .perf-aggregate { flex: 1 1 100%; margin-left: 0; min-height: 44px; } .perf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .perf-card-value { font-size: var(--font-lg); } .perf-subtitle { margin-top: 18px; } .perf-chart-plot { height: 180px; } .perf-chart-legend { flex-wrap: wrap; }   .perf-page .perf-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }   .perf-info { left: 8px; right: 8px; bottom: calc(var(--mobile-nav-height) + 8px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 24px - env(safe-area-inset-bottom)); } .perf-info-close { width: 40px; height: 40px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .feature-header:has(.tr-header-actions) > h2 { display: none; } body:has(.settings-sidebar-header) .app-topbar { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .todo-mbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; } .todo-mbar .todo-search-inline { flex: 1 1 auto; min-width: 0; } .todo-mdisplay-btn { flex: 0 0 auto; min-height: 44px; }   .todo-mdisplay-btn::after { content: " ▾"; } .todo-msheet-overlay { position: fixed; inset: 0; z-index: 60; background: var(--color-overlay-black-30); } .todo-sort-bar.todo-msheet { position: fixed; left: 12px; right: 12px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); z-index: 61; flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible; gap: 6px; margin: 0; padding: 12px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; box-shadow: var(--shadow-lg); } .todo-sort-bar.todo-msheet::after { display: none; } .todo-sort-bar.todo-msheet > .todo-sort-chip, .todo-sort-bar.todo-msheet > .todo-sort-more > summary { min-height: 44px; justify-content: flex-start; text-align: left; } .todo-sort-bar.todo-msheet .todo-sort-more-items { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; } .todo-chip-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .todo-chip-bar::-webkit-scrollbar { display: none; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .tr-list-scroll { display: flex; flex: 1 1 100%; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tr-list-scroll::-webkit-scrollbar { display: none; } .tr-list-scroll > * { flex: 0 0 auto; white-space: nowrap; } .tr-overflow-popup > .tr-upper-config-btn { width: 100%; min-height: 44px; margin-bottom: 8px; } } 
/*css/screens/36-mobile-settings.css*/
    @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-layout { flex-direction: column; width: 100%; min-height: 0; } .settings-layout > .settings-sidebar { position: static; left: auto; top: auto; height: auto; width: 100%; min-width: 0; flex: none; border-right: none; border-bottom: 1px solid var(--color-border-default); box-shadow: none; transition: none; } .settings-sidebar-header { padding: 6px 12px 6px 6px; } .settings-back-button { justify-content: center; min-width: 40px; min-height: 40px; margin-right: 4px; } .settings-sidebar-search, .settings-space .settings-sidebar-search { padding: 6px 12px; } .settings-search-input { font-size: 16px; min-height: 40px; }   .settings-nav-scroll { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 0 8px 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .settings-nav-group-header { flex: none; margin: 0 2px 0 10px; white-space: nowrap; } .settings-nav-group-header:first-child { margin-left: 4px; } .settings-menu-item, button.settings-menu-item { flex: none; display: flex; align-items: center; gap: 4px; min-height: 40px; margin: 0; white-space: nowrap; } .settings-nav-empty { flex: none; margin: 10px 8px; }   .settings-mobile-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; flex: none; border: none; border-bottom: 1px solid var(--color-border-default); text-align: left; font-size: var(--font-sm); } .settings-navdrawer > .settings-sidebar:not(.is-open) .settings-sidebar-search, .settings-navdrawer > .settings-sidebar:not(.is-open) .settings-nav-scroll { display: none; } .settings-navdrawer > .settings-sidebar.is-open .settings-nav-scroll { display: block; max-height: 55vh; max-height: 55dvh; overflow-x: hidden; overflow-y: auto; padding: 0 0 8px; } .settings-navdrawer > .settings-sidebar.is-open .settings-nav-group-header { margin: 14px 16px 6px; }   .settings-navdrawer > .settings-sidebar.is-open .settings-menu-item { width: calc(100% - 16px); margin: 2px 8px; }   .settings-menu-item.settings-menu-item-two-line { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }   .settings-content { flex: 1; min-height: 0; padding: 16px 16px 24px; } .settings-space .settings-content { padding: 0; } .settings-space .settings-tab-section { max-width: none; margin: 16px 16px 24px; } .settings-space .settings-tab-description, .settings-tab-description { margin-bottom: 16px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {     .settings-section { padding: 14px 14px; margin-bottom: 16px; } .settings-space .settings-section { padding: 14px 14px 14px 22px; margin-bottom: 16px; } .settings-space .settings-section::before { left: 8px; }   .settings-field-row { flex-wrap: wrap; row-gap: 6px; }   .settings-row-card { flex-wrap: wrap; row-gap: 10px; } .settings-row-card > .settings-row-card-text { flex: 1 1 210px; min-width: 0; }   .settings-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), .settings-layout .settings-content select, .settings-layout .settings-content textarea, .settings-plan-page input:not([type="checkbox"]):not([type="radio"]), .settings-plan-page select { font-size: 16px; } .settings-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), .settings-layout select { min-height: 44px; }   .settings-input-sm { max-width: 160px; min-width: 80px; } .settings-layout input[type="range"] { min-height: 44px; }   .settings-layout .settings-checkbox { min-height: 44px; }   .settings-layout .settings-btn, .settings-layout .settings-btn-sm, .settings-layout .settings-pill-primary, .settings-layout .settings-pill-secondary, .settings-layout .settings-add-pill, .settings-layout .settings-link-button { min-height: 44px; } .settings-layout .settings-btn-sm { padding: 6px 12px; } .settings-layout .settings-btn-icon { min-width: 44px; min-height: 44px; }   .settings-seg-bar { display: flex; width: 100%; overflow-x: auto; } .settings-seg-btn { flex: 1 0 auto; min-height: 40px; padding: 7px 10px; white-space: nowrap; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-plan-page { left: 0; top: 0; transform: none; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border: none; border-radius: 0; } .settings-plan-page .settings-subpage-head-primary { padding: 12px 12px 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); border-radius: 0; } .settings-plan-page .settings-subpage-close-onprimary { width: 40px; height: 40px; } .settings-plan-page .settings-plan-cards { grid-template-columns: 1fr; margin: 12px; } .settings-plan-page .settings-plan-body { padding: 12px 16px 14px; } .settings-plan-btn { min-height: 44px; } .settings-plan-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); } .settings-plan-footer .settings-btn-sm { min-height: 40px; }   .settings-dialog-card .settings-pill-primary, .settings-dialog-card .settings-pill-secondary { min-height: 40px; }   .sc-overlay { padding: 12px; align-items: flex-start; } .sc-body { padding: 10px 14px 0; } .sc-header { padding: 0 6px 0 14px; } .sc-header-icon-btn, .sc-header-close { width: 40px; height: 40px; } .sc-three-dot-btn { width: 40px; height: 40px; font-size: 18px; } .sc-popup-item { min-height: 40px; font-size: 15px; } .sc-btn-green, .sc-btn-gray { min-height: 40px; }   .sc-grid { grid-template-columns: 1fr; } .sc-grid-label { padding-bottom: 2px; }   input.sc-input { font-size: 16px; } .sc-input-editable { min-height: 40px; } .sc-uawiz-panel { margin: 12px; padding: 16px 14px 18px; } .sc-uawiz-panel input:not([type="checkbox"]):not([type="radio"]), .sc-uawiz-panel select { font-size: 16px; }   .flauncher-head { flex-direction: column; align-items: stretch; gap: 10px; } .flauncher-search { flex: none; height: 44px; border-radius: 22px; } input.flauncher-input { font-size: 16px; } .flauncher-pin {   top: 0; right: 0; padding: 12px; } .main-content > .feature-page:has(> .flauncher) { padding: 12px 16px; }   .manual-page { flex-direction: column; width: 100%; } .manual-side { width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--color-border-default); } .manual-search { padding: 8px 12px 4px; } input.manual-search-box { font-size: 16px; min-height: 40px; } .manual-search-result { max-height: 30vh; } .manual-toc { flex: none; max-height: 24vh; max-height: 24dvh; padding: 4px 8px 8px; } .manual-toc-chapter-btn, .manual-toc-section-btn { min-height: 40px; } .manual-side-foot { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; } .manual-side-foot .manual-ai, .manual-side-foot .manual-print { flex: 1 1 140px; min-height: 40px; } .manual-side-foot .manual-version { flex: 1 1 100%; } .manual-body { flex: 1 1 auto; min-height: 0; padding: 16px 16px 32px; } .manual-body h1 { font-size: var(--font-xl); } .manual-body table { display: block; overflow-x: auto; }   .manual-chat { order: 1; width: 100%; flex: 0 0 auto; height: 42vh; height: 42dvh; border-left: none; border-bottom: 1px solid var(--color-border-default); } .manual-body { order: 2; } .manual-page:has(> .manual-chat) .manual-toc { max-height: 14vh; max-height: 14dvh; } .manual-chat-input { padding: 8px 12px; } input.manual-chat-box { font-size: 16px; min-height: 40px; } .manual-chat-send { min-height: 40px; }   .main-content > .er-page { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 16px 16px 32px; overflow-y: auto; } .er-select, .er-textarea, .er-tech { font-size: 16px; } .er-select { min-height: 44px; } .er-attach-btn, .er-notify-copy, .er-attach-remove { display: inline-flex; align-items: center; min-height: 40px; } .er-attach-remove { min-width: 40px; justify-content: center; } .er-tech-toggle { min-height: 40px; } .er-notify-close { min-width: 40px; min-height: 40px; } .er-actions { display: flex; flex-wrap: wrap; gap: 8px; } .er-actions > button { flex: 1 1 120px; min-height: 44px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-dialog-card { min-width: 0; width: calc(100vw - 32px); max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 16px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-item-actions { opacity: 1; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }   .settings-listlabel { flex-wrap: wrap; row-gap: 8px; } .settings-listlabel > .settings-listlabel-col { flex: 1 1 200px; } .settings-add-pill { white-space: nowrap; flex: none; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-layout .settings-subpage-close, .settings-layout .settings-subpage-close-onprimary, .settings-layout .settings-subpage-danger, .settings-layout .sc-mailpanel-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } .settings-layout .settings-color-input { width: 44px; height: 40px; } } @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .settings-routing-head { flex-wrap: wrap; row-gap: 8px; } .settings-routing-head > .settings-pill-primary { flex: none; white-space: nowrap; margin-left: auto; }   .settings-mr-step-head { min-height: 40px; } } 
/*css/screens/37-space-tabs.css*/
  .space-tabs { display: flex; align-items: flex-end; gap: 8px; padding: 3px 10px 0 6px; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); } .space-tabs-list { display: flex; align-items: flex-end; flex: 1 1 auto; min-width: 0; overflow-x: auto;   scrollbar-width: none; } .space-tabs-list::-webkit-scrollbar { display: none; } .space-tab { position: relative; display: flex; align-items: center; flex: 1 1 0;   min-width: 60px; max-width: 330px; height: 44px; margin: 0 5px; border-radius: 8px 8px 0 0; background: transparent; border-bottom: 3px solid transparent; } .space-tab:hover { background: var(--color-border-default); } .space-tab.active { background: var(--color-bg-base); border-bottom-color: var(--color-primary); }   .space-tab.dragging { opacity: 0.45; } .space-tab-main { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 0 0 10px; background: none; border: 0; cursor: pointer; color: var(--color-text-primary); font-size: 14px; } .space-tab-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px;   margin-right: 4px; border-radius: 50%; overflow: hidden; background: var(--color-primary-surface); } .space-tab-avatar-img { width: 100%; height: 100%; object-fit: cover; } .space-tab-avatar-initial { font-size: 13px; font-weight: 600; color: var(--color-primary-on-surface); } .space-tab-title { flex: 1 1 auto; min-width: 0; margin: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .space-tab-badge { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; margin: 0 4px; border-radius: 999px; background: var(--color-error); color: var(--color-text-on-primary); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; } .space-tab-close { flex: 0 0 28px; width: 28px; height: 28px; margin: 0 5px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-tertiary); font-size: 16px; line-height: 1; cursor: pointer; } .space-tab-close:hover { background: var(--color-error); color: var(--color-text-on-primary); }   .space-tab-close:active { background: var(--color-tab-close-pressed); color: var(--color-text-on-primary); } .space-tab-add {   flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; min-width: 40px; height: 40px; padding: 0 11px 0 8px; margin: 0 8px 3px 8px; border: 0; border-radius: 20px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); } .space-tab-add-label { font-size: var(--font-xs); font-weight: 600; } .space-tab-add:hover { filter: brightness(1.08); }   .space-tab.pending .space-tab-title { color: var(--color-text-tertiary); } .space-tab.pending .space-tab-avatar { background: var(--color-bg-sunken); }     .space-tabs.collapsed { padding: 0; align-items: stretch; } .space-tabs-peek { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 12px; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 13px; cursor: pointer; text-align: left; } .space-tabs-peek:hover { background: var(--color-border-default); } .space-tabs-peek-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   .space-tabs-peek-count { flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 999px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: 12px; line-height: 20px; text-align: center; } .space-tabs-chevron { flex: 0 0 auto; color: var(--color-text-tertiary); } .space-tabs-collapse { flex: 0 0 32px; width: 32px; height: 32px; margin: 0 0 6px 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-tertiary); font-size: 14px; cursor: pointer; } .space-tabs-collapse:hover { background: var(--color-border-default); }     .space-tabs.space-tabs-sidebar { display: block; padding: 0; background: transparent; border-bottom: 0; } .space-tabs-sidebar .space-tabs-list { display: block; overflow-x: visible; } .space-tabs-sidebar .space-tab { width: 100%; max-width: none; margin: 0 0 4px 0; border-radius: 8px; border-bottom: 0; border-left: 3px solid transparent; } .space-tabs-sidebar .space-tab.active { background: var(--color-primary-surface); border-left-color: var(--color-primary); } .space-tabs-sidebar .space-tab-add { width: 100%; height: 40px; margin: 4px 0 0 0; border-radius: 8px; font-size: 18px; }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .space-tabs.space-tabs-top { display: none; } }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { .space-tabs.space-tabs-sidebar { display: none; } }   .nav-space-section { padding: 8px 10px; border-bottom: 1px solid var(--color-border-default); } .nav-space-header { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; text-align: left; } .nav-space-header:hover { color: var(--color-text-primary); } .nav-space-header-label { flex: 1 1 auto; } .nav-space-header-count { flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 999px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } .nav-space-header-chevron { flex: 0 0 auto; color: var(--color-text-tertiary); }   @media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) { .nav-space-section { display: none; } }   .space-open-newtab { display: none; }   a.avatar-menu-item.space-open-newtab { text-decoration: none; color: inherit; } @media (display-mode: browser) { .app-layout:not(.has-native-tabbar) .space-tabs, .app-layout:not(.has-native-tabbar) .nav-space-section { display: none !important; } html:has(.app-layout:not(.has-native-tabbar)) { --space-tabs-height: 0px; --space-tabs-collapsed-height: 0px; } .app-layout:not(.has-native-tabbar) .space-open-newtab { display: block; } }   .space-switching { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(20, 24, 22, 0.42); } .space-switching-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; background: var(--color-bg-base); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); max-width: 86vw; } .space-switching-spinner { flex: 0 0 auto; width: 20px; height: 20px; border: 2.5px solid var(--color-border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .space-switching-text { font-size: var(--font-sm); color: var(--color-text-primary); } 
/*css/screens/39-medium-shell.css*/
    @media (min-width: 769px) and (max-width: 1280px) and (min-height: 501px), (min-width: 769px) and (max-width: 1280px) and (pointer: fine), (min-width: 769px) and (max-width: 1280px) and (pointer: none) { .app-topbar .btn-hamburger { display: flex; } .sidebar { position: fixed; left: calc(-1 * var(--sidebar-width) - 12px); top: var(--topbar-height); bottom: 0; z-index: 1001; transition: left var(--duration-normal) ease; box-shadow: none; } .sidebar.mobile-open { left: 0; box-shadow: 4px 0 12px var(--shadow-sm); } .mobile-sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: var(--z-skip); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal); } .mobile-sidebar-overlay.active { opacity: 1; pointer-events: auto; } } 
/*css/screens/38-mobile-type-floor.css*/
    @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .act-block-dots { font-size: 13px; }   .act-block-more { font-size: 11px; }   .act-block.away .act-block-label { font-size: 13px; }   .act-block.unreg-activity .act-block-label { font-size: 13px; }   .act-heatmap-date { font-size: 13px; }   .act-heatmap-hint { font-size: 13px; }   .act-heatmap-hour { font-size: 13px; }   .act-heatmap-legend { font-size: 11px; }   .act-heatmap-sub { font-size: 13px; }   .act-hour-label { font-size: 11px; }   .act-log-time { font-size: 13px; }   .act-log-title { font-size: 13px; }   .act-popup-none { font-size: 13px; }   .act-segment-btn { font-size: 13px; }   .act-summary { font-size: 13px; }   .activity-time { font-size: 11px; }   .ai-attach-remove { font-size: 13px; }   .ai-format-item { font-size: 13px; }   .ai-link-btn { font-size: 13px; }   .ai-msg-link { font-size: 13px; }   .ai-polish-rewritten-label { font-size: 13px; }   .ai-save-btn { font-size: 13px; }   .ai-theme-suggest-loading, .ai-theme-suggest-empty { font-size: 13px; }   .ai-theme-suggest-refresh { font-size: 13px; }   .ai-theme-suggest-title { font-size: 13px; }   .ai-thinking { font-size: 13px; }   .ai-toolbar-btn { font-size: 13px; }   .ai-chat-list-empty { font-size: 13px; }   .alert-text-sm { font-size: 11px; }   .att-badge { font-size: 11px; }   .attachment-ctx-head { font-size: 13px; }   .attachment-ctx-menu button { font-size: 13px; }   .attachment-retry { font-size: 13px; }   .attachment-size { font-size: 11px; }   .autocomplete-item { font-size: 13px; }   .avatar-group .avatar-circle { font-size: 13px; }   .avatar-overflow .avatar-initial { font-size: 11px; }   .badge-alert { font-size: 13px; }   .badge-state { font-size: 13px; }   .bm-rl-quick button { font-size: 13px; }   .bm-send-arrow { font-size: 13px; }   .bm-template-add { font-size: 13px; }   .bm-template-arrow { font-size: 13px; }   .bm-template-more { font-size: 13px; }   .bm-template-top-item { font-size: 13px; }   .bookmark-group-chip { font-size: 13px; }   .bookmark-tag-badge { font-size: 11px; }   .branch-detail-empty { font-size: 13px; }   .branch-detail-members-empty { font-size: 13px; }   .btn-add-recipient { font-size: 13px; }   .btn-attachment-delete { font-size: 13px; }   .btn-back-inbox { font-size: 13px; }   .btn-check { font-size: 11px; }   .btn-danger-outline { font-size: 13px; }   .btn-dm-back { font-size: 13px; }   .btn-draft, .btn-discard { font-size: 11px; }   .btn-gray { font-size: 13px; }   .btn-green { font-size: 13px; }   .btn-link { font-size: 13px; }   .btn-popup-action { font-size: 13px; }   .btn-progress { font-size: 13px; }   .btn-rank-star { font-size: 13px; }   .btn-reply-dropdown { font-size: 11px; }   .btn-search-clear { font-size: 13px; }   .btn-search-refilter { font-size: 13px; }   .btn-sm { font-size: 13px; }   .btn-small-green { font-size: 13px; }   .btn-small-red { font-size: 13px; }   .btn-suggestion-chip { font-size: 13px; }   .btn-tag-remove { font-size: 13px; }   .btn-template-add-label { font-size: 13px; }   .btn-template-cancel { font-size: 11px; }   .btn-template-save { font-size: 13px; }   .btn-xs { font-size: 13px; }   .bulk-ai-band-btn { font-size: 13px; }   .bulk-ai-band-desc { font-size: 13px; }   .bulk-ai-divider-link { font-size: 13px; }   .bulk-ai-divider-tag { font-size: 11px; }   .bulk-ai-fact { font-size: 13px; }   .bulk-btn { font-size: 13px; }   .bulk-confirm-chip { font-size: 13px; }   .bulk-confirm-flip { font-size: 13px; }   .bulk-confirm-more { font-size: 13px; }   .bulk-confirm-note { font-size: 13px; }   .bulk-guide-btn { font-size: 13px; }   .bulk-total { font-size: 13px; }   .bulk-undo-btn { font-size: 13px; }   .bulletin-sender { font-size: 13px; }   .cab-upper-desc { font-size: 13px; }   .cab-upper-empty { font-size: 13px; }   .cab-upper-lastupdated { font-size: 13px; }   .cabinet-address-path { font-size: 13px; }   .cabinet-btn-danger-sm { font-size: 13px; }   .cabinet-btn-small { font-size: 13px; }   .cabinet-col-date { font-size: 13px; }   .cabinet-col-folder { font-size: 13px; }   .cabinet-col-size { font-size: 13px; }   .cabinet-col-type { font-size: 13px; }   .cabinet-compliance-tile-note { font-size: 13px; }   .cabinet-content-tab-btn { font-size: 13px; }   .cabinet-crumb { font-size: 13px; }   .cabinet-ctx-item .ctx-shortcut { font-size: 13px; }   .cabinet-empty-note { font-size: 13px; }   .cabinet-empty.is-folder-empty .cabinet-empty-desc { font-size: 13px; }   .cabinet-empty.is-list-empty .cabinet-empty-desc { font-size: 13px; }   .cabinet-file-header .cabinet-col-name, .cabinet-file-header .cabinet-col-folder, .cabinet-file-header .cabinet-col-size, .cabinet-file-header .cabinet-col-type, .cabinet-file-header .cabinet-col-date { font-size: 13px; }   .cabinet-file-name { font-size: 13px; }   .cabinet-file-row .cabinet-col-folder, .cabinet-file-row .cabinet-col-date, .cabinet-file-row .cabinet-col-type, .cabinet-file-row .cabinet-col-size { font-size: 13px; }   .cabinet-kindfilter-btn { font-size: 13px; }   .cabinet-kindfilter-head { font-size: 13px; }   .cabinet-kindfilter-reset { font-size: 13px; }   .cabinet-m-sort-btn { font-size: 13px; }   .cabinet-pdf-tab-close { font-size: 13px; }   .cabinet-pdf-tab.is-dirty::after { font-size: 13px; }   .cabinet-preview-empty-desc { font-size: 13px; }   .cabinet-preview-empty-kbd { font-size: 13px; }   .cabinet-preview-empty-key { font-size: 13px; }   .cabinet-preview-keep-hint-ok { font-size: 13px; }   .cabinet-preview-keep-hint-text { font-size: 13px; }   .cabinet-preview-notice-action { font-size: 13px; }   .cabinet-preview-toggle { font-size: 13px; }   .cabinet-shortcut-help-desc { font-size: 13px; }   .cabinet-shortcut-help-key { font-size: 13px; }   .cabinet-shortcut-help-section { font-size: 13px; }   .cabinet-status-sync { font-size: 13px; }   .cabinet-tab { font-size: 13px; }   .cabinet-tile-meta { font-size: 13px; }   .cabinet-tree-arrow { font-size: 13px; }   .cabinet-tree-status { font-size: 13px; }   .cabinet-tree-theme-avatar.is-initial { font-size: 13px; }   .cabinet-tree-theme-badge { font-size: 11px; }   .cabinet-view-segment-btn { font-size: 13px; }   .cabinet-viewmode-btn { font-size: 13px; }   .cabinet-viewmode-row-shortcut { font-size: 13px; }   .candidate-avatar { font-size: 11px; }   .candidate-project { font-size: 11px; }   .candidate-title-badge { font-size: 11px; }   .cc-add-link { font-size: 13px; }   .cc-field-title { font-size: 13px; }   .cd-email-hint { font-size: 13px; }   .cg-note { font-size: 13px; }   .cg-sublabel { font-size: 13px; }   .check-label { font-size: 11px; }   .cl-hash { font-size: 13px; }   .cleanup-action-kept { font-size: 13px; }   .cleanup-busy-sub { font-size: 13px; }   .cleanup-cat-pill { font-size: 11px; }   .cleanup-item-role { font-size: 11px; }   .cleanup-legend-text { font-size: 13px; }   .cleanup-link-btn { font-size: 13px; }   .com-body-label { font-size: 13px; }   .com-link { font-size: 13px; }   .com-mention-address { font-size: 13px; }   .com-preview-btn { font-size: 13px; }   .compact-caret { font-size: 11px; }   .compliance-hash-info { font-size: 13px; }   .compliance-stat-label { font-size: 13px; }   .compose-attachment-chip { font-size: 11px; }   .compose-attachment-item { font-size: 13px; }   .compose-draft-badge { font-size: 11px; }   .compose-field-error { font-size: 11px; }   .compose-ghost-hint { font-size: 13px; }   .compose-label { font-size: 11px; }   .compose-panel .m-rl-pill { font-size: 13px; }   .compose-panel.m-full .compose-fixed-header .compose-type-badge { font-size: 13px; }   .compose-popup-menu button, .compose-popup-menu .compose-popup-btn { font-size: 13px; }   .compose-popup-menu.bm-template-popup .template-popup-body { font-size: 13px; }   .compose-popup-menu.body-context-menu .menu-gesture { font-size: 13px; }   .compose-send-retry { font-size: 13px; }   .compose-send-state { font-size: 13px; }   .compose-sending-sub { font-size: 13px; }   .compose-split-bottom:not(.compact) .bm-rl-caret, .compose-panel.m-full .bm-rl-caret { font-size: 13px; }   .compose-split-bottom:not(.compact) .compose-card-header .compose-type-badge, .compose-panel.m-full .compose-card-header .compose-type-badge { font-size: 13px; }   .compose-status { font-size: 11px; }   .compose-status-bar { font-size: 11px; }   .compose-toggle-btn { font-size: 13px; }   .contact-admin-tag { font-size: 11px; }   .contact-canceled-tag { font-size: 11px; }   .contact-company-tag { font-size: 11px; }   .contact-list-email { font-size: 13px; }   .contact-list-voice { font-size: 13px; }   .contact-qr-note { font-size: 13px; }   .contact-unorganized-dismiss { font-size: 13px; }   .contact-unorganized-empty { font-size: 13px; }   .contact-unorganized-register { font-size: 13px; }   .contact-unorganized-sub { font-size: 13px; }   .density-btn { font-size: 13px; }   .detail-field-label { font-size: 13px; }   .detail-field-label-sm { font-size: 13px; }   .detail-recipient-input { font-size: 13px; }   .detail-timeline-crumb-back { font-size: 13px; }   .dm-conv-pickbar-text { font-size: 13px; }   .dm-conv-return { font-size: 13px; }   .dm-conv-summary-count { font-size: 13px; }   .dm-start-tips-h { font-size: 13px; }   .doc-file-badge { font-size: 11px; }   .docsearch-empty-hint { font-size: 13px; }   .docsearch-move-guide { font-size: 13px; }   .docsearch-tree-empty { font-size: 13px; }   .draft-item-delete { font-size: 13px; }   .draft-item-time { font-size: 13px; }   .draft-list-empty { font-size: 13px; }   .draft-list-item { font-size: 13px; }   .draft-new-btn { font-size: 13px; }   .emoji-picker-recent-label { font-size: 11px; }   .empty-list-action { font-size: 13px; }   .er-attach-btn { font-size: 13px; }   .er-label { font-size: 13px; }   .er-notify-copied { font-size: 13px; }   .er-notify-copy { font-size: 13px; }   .er-tech { font-size: 13px; }   .er-tech-toggle { font-size: 13px; }   .event-time { font-size: 13px; }   .ext-attr-badge { font-size: 11px; }   .ext-avatar { font-size: 13px; }   .fb-btn-link { font-size: 13px; }   .fb-hub-link { font-size: 13px; }   .feature-page:has(> .todo-stats-header) .todo-esc-hint { font-size: 13px; }   .flauncher-foot { font-size: 13px; }   .flauncher-pin { font-size: 13px; }   .flauncher-sub { font-size: 13px; }   .flauncher-tile-icon.is-create::after { font-size: 11px; }   .flauncher-tile.is-compact .flauncher-tile-title { font-size: 13px; }   .folder-dm-avatar { font-size: 11px; }   .folder-empty { font-size: 13px; }   .folder-item { font-size: 13px; }   .folder-item-link .folder-name-link { font-size: 13px; }   .folder-retry-btn { font-size: 13px; }   .folder-section-badge { font-size: 11px; }   .folder-section-header { font-size: 13px; }   .font-size-btn { font-size: 13px; }   .ftm-chip-x { font-size: 13px; }   .ftm-input { font-size: 13px; }   .ftm-sub { font-size: 13px; }   .global-search-hint { font-size: 11px; }   .global-search-state { font-size: 13px; }   .group-popup-empty { font-size: 13px; }   .group-popup-item { font-size: 13px; }   .group-popup-title { font-size: 13px; }   .guest-back { font-size: 13px; }   .guest-btn-sm { font-size: 13px; }   .guest-chip { font-size: 13px; }   .guest-chip-deadline { font-size: 13px; }   .guest-ext { font-size: 11px; }   .guest-muted { font-size: 13px; }   .guidance-line { font-size: 13px; }   .header-alert-circle { font-size: 13px; }   .home-activity-link { font-size: 13px; }   .home-activity-text { font-size: 13px; }   .home-branch-empty { font-size: 13px; }   .home-branch-expander { font-size: 13px; }   .home-branch-location-off { font-size: 13px; }   .home-discovery-head-title { font-size: 13px; }   .home-discovery-head-title, .home-discovery-openall { font-size: 13px; }   .home-discovery-icon.is-create::after { font-size: 11px; }   .home-discovery-openall { font-size: 13px; }   .home-discovery-pin { font-size: 13px; }   .home-discovery-title { font-size: 13px; }   .home-fc-age { font-size: 13px; }   .home-footer-link { font-size: 13px; }   .home-footer-powered { font-size: 13px; }   .home-header-date { font-size: 13px; }   .home-header-greeting { font-size: 13px; }   .home-header-hint { font-size: 13px; }   .home-m-sub { font-size: 13px; }   .home-m-svc-sub { font-size: 11px; }   .home-mailact-desc { font-size: 13px; }   .home-mailact-ghost { font-size: 13px; }   .home-mailact-step-sub { font-size: 13px; }   .home-mailact-tourlink { font-size: 13px; }   .home-mailcta-desc { font-size: 13px; }   .home-mailrecent-new { font-size: 11px; }   .home-mailrecent-pill { font-size: 11px; }   .home-mailrecent-sub { font-size: 13px; }   .home-mailroom-flowhint { font-size: 13px; }   .home-mailroom-label-link { font-size: 13px; }   .home-mailroom-label-link, .home-mailroom-label-sub { font-size: 13px; }   .home-mailroom-label-sub { font-size: 11px; }   .home-mailroom-label-title { font-size: 13px; }   .home-mailroom-notready { font-size: 13px; }   .home-mailroom-period { font-size: 13px; }   .home-mailroom-prog-rest { font-size: 11px; }   .home-mailroom-prog-stage { font-size: 11px; }   .home-mailroom-tip-body { font-size: 13px; }   .home-mailroom-tip-foot { font-size: 13px; }   .home-mailroom-tip-title { font-size: 13px; }   .home-mailsample-lead { font-size: 13px; }   .home-mailsample-meta { font-size: 13px; }   .home-mailset-key { font-size: 13px; }   .home-mailset-sub { font-size: 13px; }   .home-mailset-title { font-size: 13px; }   .home-mailset-title, .home-mailset-sub { font-size: 13px; }   .home-member-avatar { font-size: 13px; }   .home-member-badge { font-size: 13px; }   .home-member-location-notice { font-size: 13px; }   .home-member-menu-item { font-size: 13px; }   .home-member-row { font-size: 13px; }   .home-member-showall { font-size: 13px; }   .home-member-state { font-size: 13px; }   .home-member-trash-btn { font-size: 13px; }   .home-member-trash-close { font-size: 11px; }   .home-member-trash-count { font-size: 11px; }   .home-member-trash-desc { font-size: 13px; }   .home-member-trash-empty { font-size: 13px; }   .home-member-trash-restore { font-size: 13px; }   .home-member-voice { font-size: 13px; }   .home-mile-legend-desc { font-size: 13px; }   .home-minitour-close { font-size: 13px; }   .home-persona-seg-item { font-size: 13px; }   .home-plan-badge { font-size: 13px; }   .home-plan-cancel-btn { font-size: 13px; }   .home-plan-change-btn { font-size: 13px; }   .home-plan-hint { font-size: 13px; }   .home-plan-usage-caption { font-size: 13px; }   .home-plan-usage-label { font-size: 13px; }   .home-rateinfo-body .home-activity-link { font-size: 13px; }   .home-rateinfo-intro { font-size: 13px; }   .home-receipt-date { font-size: 13px; }   .home-receipt-empty { font-size: 13px; }   .home-receipt-failnote { font-size: 13px; }   .home-receipt-file { font-size: 13px; }   .home-receipt-openhub { font-size: 13px; }   .home-receipt-sender { font-size: 11px; }   .home-receipt-sub { font-size: 13px; }   .home-receipt-tab { font-size: 13px; }   .home-receipt-tab-badge { font-size: 11px; }   .home-receipt-title { font-size: 13px; }   .home-receipt-title, .home-receipt-sub { font-size: 13px; }   .home-receipt-to { font-size: 13px; }   .home-schedule-band-chip { font-size: 13px; }   .home-schedule-calendar-link { font-size: 13px; }   .home-schedule-chip-time { font-size: 13px; }   .home-schedule-empty-desc { font-size: 13px; }   .home-schedule-empty-secondary { font-size: 13px; }   .home-schedule-gbadge { font-size: 11px; }   .home-schedule-hour-label { font-size: 11px; }   .home-schedule-nowlabel { font-size: 13px; }   .home-schedule-seg-btn { font-size: 13px; }   .home-schedule-step-label { font-size: 13px; }   .home-schedule-today-btn { font-size: 13px; }   .home-schedule-week-bandchip, .home-schedule-week-morechip { font-size: 11px; }   .home-schedule-week-col .home-schedule-chip { font-size: 13px; }   .home-schedule-week-col .home-schedule-chip-time { font-size: 13px; }   .home-schedule-week-dow { font-size: 11px; }   .home-section-heading-sub { font-size: 13px; }   .home-space-avatar-hover { font-size: 11px; }   .home-sub-action-btn { font-size: 13px; }   .home-today-shipping-link { font-size: 13px; }   .home-triage-badge { font-size: 11px; }   .home-triage-empty-sub { font-size: 13px; }   .home-triage-expand { font-size: 13px; }   .home-triage-group-count { font-size: 11px; }   .home-triage-kbd { font-size: 11px; }   .home-triage-kbd-on { font-size: 11px; }   .home-triage-remaining { font-size: 11px; }   .home-triage-row-btn { font-size: 13px; }   .home-triage-row-btn-primary { font-size: 13px; }   .home-triage-row-btn-primary, .home-triage-row-btn { font-size: 13px; }   .home-triage-row-meta { font-size: 11px; }   .home-triage-row-title { font-size: 13px; }   .home-triage-sender-avatar { font-size: 13px; }   .home-triage-undo-btn { font-size: 13px; }   .home-welcome-desc { font-size: 13px; }   .icard-hint { font-size: 13px; }   .icard-test-result { font-size: 13px; }   .inbox-mail-connect-hint .hint-link { font-size: 13px; }   .inbox-mail-connect-hint .hint-text { font-size: 13px; }   .inbox-zero-pill { font-size: 13px; }   .inhouse-quote-list .quote-item .quote-time-short, .inhouse-quote-list .quote-item .quote-check-area, .inhouse-quote-list .quote-item .rl-pill { font-size: 11px; }   .inline-recipient-input { font-size: 13px; }   .keyword-hit { font-size: 13px; }   .latest-event-time { font-size: 13px; }   .login-compact-copy { font-size: 13px; }   .login-compact-feature { font-size: 13px; }   .login-footer { font-size: 13px; }   .login-invite { font-size: 13px; }   .login-label { font-size: 13px; }   .login-newspace-lead { font-size: 13px; }   .mail-marks-auto, .mail-marks-manual { font-size: 11px; }   .mailimport-address-label { font-size: 13px; }   .mailimport-afterflow-flow { font-size: 13px; }   .mailimport-afterflow-note { font-size: 13px; }   .mailimport-afterflow-title { font-size: 13px; }   .mailimport-app-desc { font-size: 13px; }   .mailimport-app-recommend { font-size: 13px; }   .mailimport-guide-link { font-size: 13px; }   .mailimport-lead, .mailimport-hint { font-size: 13px; }   .mailimport-note { font-size: 13px; }   .mailimport-step-desc { font-size: 13px; }   .mailimport-tab { font-size: 13px; }   .manual-body code { font-size: 13px; }   .manual-body table { font-size: 13px; }   .manual-search-icon { font-size: 13px; }   .manual-toc-section-btn { font-size: 13px; }   .manual-version { font-size: 13px; }   .member-edit-status { font-size: 13px; }   .member-project-chip { font-size: 13px; }   .message-detail-panel .floating-confirm-bar .fcb-check.fcb-armed::after { font-size: 13px; }   .message-detail-panel .floating-confirm-bar .fcb-overdue { font-size: 13px; }   .message-item.swipe-left-hint::after { font-size: 13px; }   .message-item.swipe-right-hint::before { font-size: 13px; }   .mf-address-chip-x { font-size: 13px; }   .mf-address-summary { font-size: 13px; }   .mf-choice { font-size: 13px; }   .mf-keyword-clear { font-size: 11px; }   .mf-menu-item { font-size: 13px; }   .mf-pill-x { font-size: 13px; }   .mf-preset-btn { font-size: 13px; }   .mf-row-x { font-size: 13px; }   .mile-ai-tier { font-size: 13px; }   .mile-ai-unlock-note { font-size: 13px; }   .mile-coverage-detail { font-size: 13px; }   .mile-coverage-title { font-size: 13px; }   .mile-donate-cause-unit { font-size: 13px; }   .mile-donate-note { font-size: 13px; }   .mile-donate-pill { font-size: 13px; }   .mile-donate-record-empty { font-size: 13px; }   .mile-donate-sub { font-size: 13px; }   .mile-donate-unit-cost { font-size: 13px; }   .mile-explain-body { font-size: 13px; }   .mile-explain-note { font-size: 13px; }   .mile-explain-title { font-size: 13px; }   .mile-hero-hint { font-size: 13px; }   .mile-hero-title { font-size: 13px; }   .mile-inline-info { font-size: 13px; }   .mile-inline-link { font-size: 13px; }   .mile-overdue-note { font-size: 13px; }   .mile-overdue-title { font-size: 13px; }   .mile-rank-coin { font-size: 13px; }   .mile-stamp-name { font-size: 11px; }   .mile-status-note { font-size: 13px; }   .mobile-bottom-nav .bottom-nav-badge { font-size: 11px; }   .mobile-bottom-nav .bottom-nav-item { font-size: 13px; }   .mrs-sub { font-size: 13px; }   .msg-action-btn { font-size: 13px; }   .msg-alert-badge.many { font-size: 11px; }   .msg-avatar .msg-avatar-initial { font-size: 13px; }   .msg-sender-name { font-size: 13px; }   .msg-timestamp { font-size: 13px; }   .nav-badge { font-size: 11px; }   .nav-expanded-project { font-size: 13px; }   .nav-expanded-projects-title { font-size: 13px; }   .nav-group-label { font-size: 11px; }   .nav-group-toggle { font-size: 11px; }   .nav-shortcuts-title { font-size: 13px; }   .nav-tool-badge { font-size: 11px; }   .nav-tool-done { font-size: 13px; }   .nav-tool-edit-title { font-size: 13px; }   .nav-tool-remove { font-size: 13px; }   .nav-tool-reset { font-size: 13px; }   .nav-tool-tray-chip { font-size: 13px; }   .nav-tool-tray-title { font-size: 13px; }   .notif-badge { font-size: 11px; }   .notif-item-desc { font-size: 13px; }   .notif-mark-all { font-size: 13px; }   .order-copy-btn { font-size: 13px; }   .order-invoice-btn { font-size: 13px; }   .order-view-btn { font-size: 13px; }   .panel-admin-badge { font-size: 13px; }   .panel-attr-badge { font-size: 11px; }   .panel-contact-email { font-size: 13px; }   .panel-retired-badge { font-size: 11px; }   .panel-toggle-btn { font-size: 13px; }   .panel-track-genre { font-size: 11px; }   .panel-track-latest { font-size: 13px; }   .panel-track-meta { font-size: 13px; }   .pcp-avatar { font-size: 13px; }   .pcp-clear { font-size: 13px; }   .pcp-count { font-size: 13px; }   .pcp-result, .pcp-action { font-size: 13px; }   .pcp-search-empty { font-size: 13px; }   .pcp-section-note { font-size: 13px; }   .pdf-landing-clear { font-size: 13px; }   .pdf-landing-drop-hint { font-size: 13px; }   .pdf-landing-empty-sub { font-size: 13px; }   .pdf-landing-preview-wait { font-size: 13px; }   .perf-card-sub { font-size: 13px; }   .perf-card-tier { font-size: 13px; }   .perf-chart-day { font-size: 13px; }   .perf-period-btn { font-size: 13px; }   .perf-pill { font-size: 13px; }   .persona-coach-body { font-size: 13px; }   .persona-coach-ok { font-size: 13px; }   .persona-coach-title { font-size: 13px; }   .persona-fr-card-desc { font-size: 13px; }   .persona-fr-card-desc, .persona-fr-line-text, .persona-fr-assurance-text { font-size: 13px; }   .persona-fr-hint-text { font-size: 13px; }   .persona-fr-line-note { font-size: 13px; }   .persona-fr-line-text { font-size: 13px; }   .persona-fr-lines-head { font-size: 13px; }   .persona-fr-more { font-size: 13px; }   .persona-fr-space-name { font-size: 13px; }   .persona-fr-start { font-size: 13px; }   .persona-fr-sub { font-size: 13px; }   .pin-bar-foot-hint { font-size: 13px; }   .pin-bar-foot-link { font-size: 13px; }   .pin-bar-head-btn { font-size: 13px; }   .pin-bar-row-due { font-size: 13px; }   .pin-bar-row-due-ghost { font-size: 13px; }   .popup-badge { font-size: 13px; }   .popup-inline-btn { font-size: 13px; }   .popup-note { font-size: 13px; }   .popup-section-label { font-size: 13px; }   .popup-sub-label { font-size: 13px; }   .project-member-count { font-size: 11px; }   .qc-sub { font-size: 13px; }   .qdp-grid dd { font-size: 11px; }   .qdp-grid dt { font-size: 11px; }   .quote-detail-copy { font-size: 11px; }   .quote-header-toggle .qht-arrow { font-size: 11px; }   .quote-header-toggle .qht-text { font-size: 11px; }   .quote-hover-bar .btn-quote-action.btn-quote-askai { font-size: 13px; }   .quote-hover-bar .btn-quote-action.btn-quote-task { font-size: 13px; }   .quote-neglect-nudge .qnn-action { font-size: 13px; }   .quote-neglect-nudge .qnn-lead { font-size: 13px; }   .rdp-action { font-size: 13px; }   .rdp-chip { font-size: 13px; }   .rdp-empty-text { font-size: 13px; }   .rdp-summary-count { font-size: 13px; }   .reaction-badge-sm { font-size: 11px; }   .receiver-address-warning { font-size: 11px; }   .receiver-address-warning-mark { font-size: 11px; }   .recipient-tag { font-size: 13px; }   .reply-line-bar .rlb-mini { font-size: 13px; }   .reply-line-tools .rlt-item { font-size: 13px; }   .reply-line-tools.is-list .rlt-row-body { font-size: 13px; }   .reply-line-tools.is-list .rlt-row-title { font-size: 13px; }   .reply-placeholder-bar { font-size: 13px; }   .reply-preview-label { font-size: 13px; }   .response-limit-datetime { font-size: 13px; }   .restore-desc { font-size: 13px; }   .rgm-chip-x { font-size: 13px; }   .rgm-label { font-size: 13px; }   .rgm-member-input { font-size: 13px; }   .rgm-new { font-size: 13px; }   .rgm-suggest button { font-size: 13px; }   .rl-sheet .popup-sub-label { font-size: 13px; }   .rl-sheet .response-users-row .detail-field-label-sm { font-size: 13px; }   .rt-al-addsender { font-size: 13px; }   .rt-al-dim-cap { font-size: 13px; }   .rt-al-item-sub { font-size: 11px; }   .rt-al-kind { font-size: 11px; }   .rt-al-label { font-size: 13px; }   .rt-al-note { font-size: 13px; }   .rt-al-preset { font-size: 13px; }   .rt-al-ref { font-size: 11px; }   .rt-al-seg-btn { font-size: 13px; }   .rt-bulk-field-label { font-size: 13px; }   .rt-bulk-form-lead { font-size: 13px; }   .rt-bulk-note { font-size: 13px; }   .rt-count-line { font-size: 13px; }   .rt-date-toggle { font-size: 13px; }   .rt-detail-pills-title { font-size: 13px; }   .rt-escalation-key { font-size: 13px; }   .rt-escalation-link { font-size: 13px; }   .rt-escalation-value { font-size: 13px; }   .rt-fallback-change { font-size: 13px; }   .rt-filter-btn { font-size: 13px; }   .rt-filter-check { font-size: 13px; }   .rt-genre-chip, .rt-scope-chip { font-size: 13px; }   .rt-ghost-btn { font-size: 13px; }   .rt-link-btn { font-size: 13px; }   .rt-loading-more, .rt-detail-loading { font-size: 13px; }   .rt-person-chip { font-size: 13px; }   .rt-pill-value { font-size: 13px; }   .rt-preset-btn { font-size: 13px; }   .rt-primary-btn { font-size: 13px; }   .rt-proof-filter { font-size: 13px; }   .rt-proof-state { font-size: 13px; }   .rt-proxy-lead { font-size: 13px; }   .rt-proxy-note { font-size: 13px; }   .rt-proxy-toggle-label { font-size: 13px; }   .rt-save-btn { font-size: 13px; }   .rt-setnone-right { font-size: 13px; }   .rt-thumb-fallback-text { font-size: 11px; }   .rt-track-cta { font-size: 13px; }   .rt-tracking-guide { font-size: 13px; }   .rt-tracking-input { font-size: 13px; }   .sa2-inform-head { font-size: 13px; }   .sa2-nopreview { font-size: 13px; }   .sa2-thumb-page { font-size: 11px; }   .sb-more { font-size: 11px; }   .sb-noaction, .sb-action { font-size: 13px; }   .sb-popup-chip { font-size: 11px; }   .sb-popup-footer { font-size: 11px; }   .sb-sec-label { font-size: 11px; }   .sb-step-num { font-size: 11px; }   .sb-title { font-size: 13px; }   .sc-addr-card-label { font-size: 13px; }   .sc-addr-field-label { font-size: 13px; }   .sc-addr-step-label { font-size: 13px; }   .sc-admin-menu-btn { font-size: 13px; }   .sc-admin-menu-item { font-size: 13px; }   .sc-admin-menu-sub { font-size: 13px; }   .sc-avatar-change-btn { font-size: 13px; }   .sc-changing-title { font-size: 13px; }   .sc-consent-card-foot { font-size: 13px; }   .sc-consent-card-label { font-size: 13px; }   .sc-consent-chip { font-size: 13px; }   .sc-consent-item.small .sc-consent-item-text { font-size: 13px; }   .sc-consent-link { font-size: 13px; }   .sc-consent-links { font-size: 13px; }   .sc-consent-note { font-size: 13px; }   .sc-consent-preview-title { font-size: 13px; }   .sc-deflist-value { font-size: 13px; }   .sc-header-sublabel { font-size: 11px; }   .sc-hint { font-size: 11px; }   .sc-icon-label { font-size: 13px; }   .sc-imp-avatar { font-size: 13px; }   .sc-imp-tag { font-size: 13px; }   .sc-impersonations-title { font-size: 13px; }   .sc-linklike { font-size: 13px; }   .sc-mailacct-limit { font-size: 13px; }   .sc-mailacct-primary-note { font-size: 13px; }   .sc-mailacct-setprimary { font-size: 13px; }   .sc-mailwiz-chip-edit { font-size: 13px; }   .sc-mailwiz-note { font-size: 13px; }   .sc-mailwiz-sublabel { font-size: 13px; }   .sc-member-status-help-body { font-size: 13px; }   .sc-member-status-help-head { font-size: 13px; }   .sc-mile-legend-body { font-size: 13px; }   .sc-mile-legend-title { font-size: 13px; }   .sc-overlay-rich-sub { font-size: 13px; }   .sc-phone-pill { font-size: 13px; }   .sc-send-btn { font-size: 13px; }   .sc-send-caret { font-size: 11px; }   .sc-send-item { font-size: 13px; }   .sc-session-alert-lead { font-size: 13px; }   .sc-text-link { font-size: 13px; }   .sc-uawiz-passnote-sub { font-size: 13px; }   .sc-uawiz-pill { font-size: 13px; }   .sc-uawiz-skip { font-size: 13px; }   .sc-uawiz-summary-label { font-size: 13px; }   .sc-verify-body { font-size: 13px; }   .sc-verify-note { font-size: 13px; }   .schedule-email-note { font-size: 13px; }   .schedule-quick-row button { font-size: 13px; }   .scr-badge { font-size: 13px; }   .scr-drop-s { font-size: 13px; }   .scr-link-btn { font-size: 13px; }   .scr-manual-doc-title { font-size: 13px; }   .scr-recent-item { font-size: 13px; }   .scr-recent-title { font-size: 13px; }   .scr-theme-chip { font-size: 13px; }   .search-bar button { font-size: 13px; }   .search-hint { font-size: 13px; }   .search-preview-sender { font-size: 13px; }   .search-result-label { font-size: 11px; }   .sendconf-note { font-size: 13px; }   .sendconf-raddr { font-size: 13px; }   .sendconf-role button { font-size: 13px; }   .sendconf-section-title { font-size: 13px; }   .sender-label { font-size: 11px; }   .sender-primary-badge { font-size: 11px; }   .settings-badge-active { font-size: 11px; }   .settings-badge-inactive { font-size: 11px; }   .settings-btn-sm { font-size: 13px; }   .settings-cancel-button { font-size: 13px; }   .settings-description { font-size: 13px; }   .settings-field-help { font-size: 13px; }   .settings-hint { font-size: 13px; }   .settings-kbd { font-size: 13px; }   .settings-kbd-hint { font-size: 11px; }   .settings-link-button { font-size: 13px; }   .settings-list-empty { font-size: 13px; }   .settings-menu-item { font-size: 13px; }   .settings-mr-arrow { font-size: 13px; }   .settings-mr-assign-suggest-item { font-size: 13px; }   .settings-mr-flow-lead { font-size: 13px; }   .settings-mr-step-summary { font-size: 13px; }   .settings-nav-empty { font-size: 13px; }   .settings-nav-group-header { font-size: 13px; }   .settings-pill-primary, .settings-pill-secondary { font-size: 13px; }   .settings-plan-btn { font-size: 13px; }   .settings-plan-change { font-size: 13px; }   .settings-plan-feature { font-size: 11px; }   .settings-plan-page .settings-subpage-sub { font-size: 13px; }   .settings-plan-price { font-size: 11px; }   .settings-plan-ribbon { font-size: 13px; }   .settings-private-pill { font-size: 13px; }   .settings-quote-sample-body { font-size: 11px; }   .settings-quote-sample-sender { font-size: 11px; }   .settings-quote-sample-time { font-size: 13px; }   .settings-quote-stat-count { font-size: 13px; }   .settings-quote-stat-pct { font-size: 13px; }   .settings-routing-empty-sub { font-size: 13px; }   .settings-routing-emptyline { font-size: 13px; }   .settings-routing-pending { font-size: 13px; }   .settings-routing-warn { font-size: 13px; }   .settings-select-sm { font-size: 13px; }   .settings-space .settings-description { font-size: 13px; }   .settings-space .settings-section .settings-field-label { font-size: 13px; }   .settings-space-avatar-lead { font-size: 13px; }   .settings-stamp-preview-hint { font-size: 13px; }   .settings-subpage-sub { font-size: 13px; }   .settings-topology-self-label { font-size: 13px; }   .settings-usage-text { font-size: 13px; }   .setup-guide-desc { font-size: 13px; }   .setup-step-sub { font-size: 13px; }   .setup-step-title { font-size: 13px; }   .slide-over-fullpage { font-size: 13px; }   .sp-pdf-dialog-error { font-size: 13px; }   .sp-pdf-dialog-warn { font-size: 13px; }   .sp-pdf-history-clear { font-size: 13px; }   .sp-pdf-overlay-hint { font-size: 13px; }   .sp-pdf-preset { font-size: 13px; }   .spc-caps { font-size: 13px; }   .spc-code-notice-sub { font-size: 13px; }   .spc-overlay-msg { font-size: 13px; }   .spc-pw-hint { font-size: 13px; }   .spc-reveal { font-size: 13px; }   .splitter-collapse-btn { font-size: 13px; }   .su-files-title { font-size: 13px; }   .su-step-note { font-size: 13px; }   .su-tree-hint { font-size: 13px; }   .suggestion-loading-text { font-size: 13px; }   .ta-item-name { font-size: 11px; }   .ta-open { font-size: 13px; }   .ta-pill { font-size: 11px; }   .tag-chip-remove { font-size: 13px; }   .tcfg-approve { font-size: 13px; }   .tcfg-ask-sub { font-size: 13px; }   .tcfg-avatar-cancel { font-size: 13px; }   .tcfg-avatar-progress-desc { font-size: 13px; }   .tcfg-choices-sub { font-size: 13px; }   .tcfg-collapsible-pill { font-size: 13px; }   .tcfg-contact-errors { font-size: 13px; }   .tcfg-field-hint { font-size: 13px; }   .tcfg-memo-count { font-size: 13px; }   .tcfg-more { font-size: 13px; }   .tcfg-q-sub { font-size: 13px; }   .tcfg-reject { font-size: 13px; }   .tcfg-row-edit-label { font-size: 13px; }   .tcfg-simple-panel-title { font-size: 13px; }   .tcfg-suggest-note { font-size: 13px; }   .template-add-input { font-size: 13px; }   .template-add-label { font-size: 13px; }   .template-add-personal { font-size: 11px; }   .template-add-title { font-size: 13px; }   .template-manage-item { font-size: 13px; }   .theme-activefilter-pill-remove { font-size: 13px; }   .theme-add-btn { font-size: 13px; }   .theme-badge-mine { font-size: 11px; }   .theme-card-generating { font-size: 13px; }   .theme-drilldown-avatar.is-initial, .theme-switch-avatar.is-initial { font-size: 13px; }   .theme-drilldown-chip { font-size: 13px; }   .theme-drilldown-members .avatar-circle { font-size: 13px; }   .theme-filter-clear-all { font-size: 13px; }   .theme-filter-combine-btn { font-size: 13px; }   .theme-filter-combine-label { font-size: 13px; }   .theme-filter-includeinvalid { font-size: 13px; }   .theme-filter-keyhint { font-size: 13px; }   .theme-filter-noitem-note { font-size: 13px; }   .theme-filter-saved-add { font-size: 13px; }   .theme-filter-saved-apply { font-size: 13px; }   .theme-filter-saved-cancel { font-size: 13px; }   .theme-filter-saved-ok { font-size: 13px; }   .theme-filter-section-clear { font-size: 13px; }   .theme-kanban-avatar { font-size: 13px; }   .theme-kanban-group { font-size: 13px; }   .theme-overview-card-note { font-size: 13px; }   .theme-overview-pill { font-size: 13px; }   .theme-overview-summary { font-size: 13px; }   .theme-sort-chip { font-size: 13px; }   .theme-table-avatar { font-size: 13px; }   .theme-toolbar-btn { font-size: 13px; }   .theme-trash-empty { font-size: 13px; }   .theme-trash-note { font-size: 13px; }   .theme-trash-restore { font-size: 13px; }   .thread-date { font-size: 11px; }   .thread-preview-empty-note { font-size: 13px; }   .tl-card-action { font-size: 13px; }   .tl-index-empty { font-size: 13px; }   .tl-index-row-meta { font-size: 13px; }   .tl-msg-time { font-size: 13px; }   .tl-return-inbox { font-size: 13px; }   .toast-center-clear { font-size: 13px; }   .toast-center-stats { font-size: 13px; }   .toast-close-all { font-size: 13px; }   .toast-compact-cta { font-size: 13px; }   .toast-cta { font-size: 13px; }   .toast-in-body .toast-more { font-size: 13px; }   .toast-more { font-size: 13px; }   .toast-mute { font-size: 13px; }   .todo-chip { font-size: 13px; }   .todo-cond { font-size: 13px; }   .todo-deadline-summary { font-size: 13px; }   .todo-deadline-title { font-size: 13px; }   .todo-dl-label { font-size: 13px; }   .todo-embed-hint { font-size: 13px; }   .todo-esc-hint { font-size: 13px; }   .todo-pb-badge { font-size: 13px; }   .todo-prio-foot-hint { font-size: 13px; }   .todo-prio-footnote { font-size: 13px; }   .todo-prio-headnote { font-size: 13px; }   .todo-prio-hint { font-size: 13px; }   .todo-prio-person { font-size: 13px; }   .todo-prio-saved { font-size: 13px; }   .todo-prio-slot { font-size: 13px; }   .todo-prio-unset-hint { font-size: 13px; }   .todo-seg-chip { font-size: 13px; }   .todo-sort-chip { font-size: 13px; }   .todo-stats-lbl { font-size: 11px; }   .todo-timeline-seg { font-size: 13px; }   .topbar-chip { font-size: 11px; }   .topbar-pill { font-size: 13px; }   .topbar-qr-dismiss { font-size: 13px; }   .topbar-qr-note { font-size: 13px; }   .tr-add-sub { font-size: 13px; }   .tr-admin-note { font-size: 13px; }   .tr-allday-more { font-size: 13px; }   .tr-approval-select { font-size: 13px; }   .tr-badge-confirmed { font-size: 11px; }   .tr-badge-shown { font-size: 11px; }   .tr-cal-event .tr-icon-btn, .tr-cal-event .tr-link-btn { font-size: 13px; }   .tr-cal-time { font-size: 13px; }   .tr-chip { font-size: 13px; }   .tr-confirm-btn { font-size: 13px; }   .tr-day-bars > li, .tr-week-rows > li { font-size: 13px; }   .tr-detail-toggle { font-size: 13px; }   .tr-duration-note { font-size: 13px; }   .tr-empty-sub { font-size: 13px; }   .tr-gap-record { font-size: 13px; }   .tr-goal-link { font-size: 13px; }   .tr-google-accounts > li { font-size: 13px; }   .tr-grid-chip { font-size: 13px; }   .tr-grid-chip .tr-cal-badge { font-size: 13px; }   .tr-grid-chip .tr-cal-title { font-size: 13px; }   .tr-grid-chip .tr-cal-content { font-size: 13px; }   .tr-period-totals-count, .tr-period-totals-item, .tr-period-totals-all, .tr-shape-legend { font-size: 13px; }   .tr-grid-ruler-cell { font-size: 13px; }   .tr-grid-ruler-cell > span { font-size: 13px; }   .tr-grid-vacant { font-size: 13px; }   .tr-header-action { font-size: 13px; }   .tr-legend-chip { font-size: 13px; }   .tr-link-btn { font-size: 13px; }   .tr-live { font-size: 11px; }   .tr-measure-head { font-size: 13px; }   .tr-mode-tab { font-size: 13px; }   .tr-overflow-group-label { font-size: 13px; }   .tr-overflow-note { font-size: 13px; }   .tr-pill { font-size: 13px; }   .tr-prev-link { font-size: 13px; }   .tr-privacy-note { font-size: 13px; }   .tr-ps-label { font-size: 13px; }   .tr-quick-hint { font-size: 13px; }   .tr-report-timeline > li { font-size: 13px; }   .tr-schedule-hero-sub { font-size: 13px; }   .tr-shortcut-hint { font-size: 13px; }   .tr-target-chips > li { font-size: 13px; }   .tr-today-count { font-size: 13px; }   .tr-undo { font-size: 13px; }   .tr-upper-config-btn { font-size: 13px; }   .tr-upper-config-sub { font-size: 13px; }   .tr-upper-hint { font-size: 13px; }   .tr-upper-item-btn { font-size: 13px; }   .tr-vacant-sub { font-size: 13px; }   .tr-warn-note { font-size: 13px; }   .tracking-item-row2, .tracking-item-row3 { font-size: 13px; }   .tracking-item-row3 { font-size: 13px; }   .tracking-layout:not(:has(.tracking-detail-header, .rt-bulk-form, .rt-detail-loading)) .tracking-detail .feature-empty { font-size: 13px; }   .tracking-progress .step-person-avatar { font-size: 11px; }   .tracking-progress .step-person-overflow { font-size: 11px; }   .ucs-config-kicker { font-size: 13px; }   .ucs-config-label { font-size: 13px; }   .ucs-manager-desc { font-size: 13px; }   .undo-bar button { font-size: 13px; }   .user-email { font-size: 13px; }   .user-pending-verification { font-size: 13px; }   .wlc-cancel { font-size: 13px; }   .wlc-code-hint { font-size: 13px; }   .xtr-dot { font-size: 11px; }   .xtr-link { font-size: 13px; }   .xtr-page-name { font-size: 13px; }   .xtr-suggest-tail { font-size: 13px; }   .xtr-tree-edit { font-size: 13px; }   .xtr-tree-name { font-size: 13px; }   .xtr-tree-popup-item { font-size: 13px; }   .xtr-tree-tag { font-size: 11px; } } 
/*css/screens/39-mobile-tap-floor.css*/
  @media (max-width: 768px) {   .folder-panel .folder-item, .folder-panel .folder-item-link .folder-name-link, .folder-panel .folder-name { font-size: 15px; }   .btn-hamburger, .btn-notification-bell, .settings-back-button, .contact-action-btn { min-width: 44px; min-height: 44px; }   .tr-goal-link, .tr-today-hide, .tr-prev-link { position: relative; } .tr-goal-link::after, .tr-prev-link::after { content: ""; position: absolute; top: -16px; bottom: -16px; left: -4px; right: -4px; } .tr-today-hide::after { content: ""; position: absolute; top: -12px; bottom: -12px; left: -12px; right: -12px; }   .cwd-fab { min-width: 44px; min-height: 44px; }   .home-m-ask-close, .mobile-detail-icon:not(.mobile-detail-nav) { min-width: 44px; min-height: 44px; }   .todo-sort-chip, .mobile-select-btn, .rt-sort-select { min-width: 44px; }   .manual-toc-chapter-btn, .manual-toc-section-btn, .manual-search-box, .todo-sort-chip, .todo-chip, .todo-sidebyside-btn, .todo-create-btn, .todo-title-search, .mobile-folder-chip, .mobile-select-btn, .btn-secondary, .act-segment-btn, .rt-preset-btn, .rt-primary-btn, .rt-filter-btn, .rt-bulk-toggle, .rt-date-toggle, .rt-sort-select, .rt-search-input, .sc-btn-gray, .settings-check-row, .settings-checkbox, .home-m-ask-link, .cabinet-m-tab, .cabinet-m-sort-btn, .cabinet-view-segment-btn, .cabinet-viewmode-btn, .cabinet-kindfilter-btn, .theme-toolbar-btn, .todo-search-inline input {   min-height: 44px; }   .manual-toc-chapter-btn, .manual-toc-section-btn, .todo-sort-chip, .todo-chip, .todo-sidebyside-btn, .todo-create-btn, .mobile-folder-chip, .mobile-select-btn, .btn-secondary, .act-segment-btn, .rt-preset-btn, .rt-primary-btn, .rt-filter-btn, .rt-bulk-toggle, .rt-date-toggle { display: inline-flex; align-items: center; }   .rt-search-input, .todo-title-search, .manual-search-box, input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { font-size: max(16px, 1em); }   .todo-sort-chips, .todo-chips, .rt-preset-row, .rt-filter-row, .mobile-folder-chips { gap: 8px; }   .rt-fallback-change, .act-nav-btn, .sc-session-alert-close, .home-m-remaining, .hint-dismiss, .btn-tag-remove, .quote-hdr-indicator, .topbar-pill, .user-email-row, .mile-info-row, .nav-tool-customize, .nav-shortcuts-edit, .mile-hero-km, a.mile-inline-link, .mile-inline-info, .mile-fold-toggle, .rl-card-delete, .mobile-detail-icon, .theme-toolbar-btn, .empty-list-action, .todo-detail-head .btn-sm, .todo-detail-head .btn-close-detail, .btn-progress, .btn-icon-sm, .sidebar.mobile-open .nav-link, .hint-link, .home-schedule-empty-primary, .home-schedule-empty-secondary, .cabinet-status-refresh, .cabinet-toolbar-search-btn, .inbox-mail-connect-hint .hint-link { position: relative; } .rt-fallback-change::after, .act-nav-btn::after, .sc-session-alert-close::after, .home-m-remaining::after, .hint-dismiss::after, .btn-tag-remove::after, .quote-hdr-indicator::after, .topbar-pill::after, .user-email-row::after, .mile-info-row::after, .nav-tool-customize::after, .nav-shortcuts-edit::after, .mile-hero-km::after, a.mile-inline-link::after, .mile-inline-info::after, .mile-fold-toggle::after, .rl-card-delete::after, .mobile-detail-icon::after, .theme-toolbar-btn::after, .empty-list-action::after, .todo-detail-head .btn-sm::after, .todo-detail-head .btn-close-detail::after, .btn-progress::after, .btn-icon-sm::after, .sidebar.mobile-open .nav-link::after, .hint-link::after, .home-schedule-empty-primary::after, .home-schedule-empty-secondary::after, .cabinet-status-refresh::after, .cabinet-toolbar-search-btn::after { content: ""; position: absolute; top: -12px; bottom: -12px; left: -12px; right: -12px;   }   .home-m-remaining::after { top: -13px; bottom: -13px; } .hint-dismiss::after, .btn-tag-remove::after { top: -15px; bottom: -15px; left: -15px; right: -15px; }   .topbar-pill::after { top: -9px; bottom: -9px; left: 0; right: 0; }   .user-email-row::after { top: -15px; bottom: -15px; left: 0; right: 0; }   .mile-info-row::after { top: -6px; bottom: -6px; left: 0; right: 0; }   .nav-tool-customize::after { top: -5px; bottom: -5px; left: -5px; right: -5px; }   .nav-shortcuts-edit::after { top: -13px; bottom: -13px; left: -13px; right: -13px; }   .mile-hero-km::after { top: -10px; bottom: -10px; left: 0; right: 0; }   a.mile-inline-link::after { top: -12px; bottom: -12px; left: 0; right: 0; }   .mile-inline-info::after { top: -16px; bottom: -16px; left: -16px; right: -16px; }   .mile-fold-toggle::after { top: -14px; bottom: -14px; left: 0; right: 0; }   .rl-card-delete::after { top: -7px; bottom: -7px; left: 0; right: 0; }   .mobile-detail-icon::after { top: -2px; bottom: -2px; left: -2px; right: -2px; }   .theme-toolbar-btn::after { top: -2px; bottom: -2px; left: 0; right: 0; }   .empty-list-action::after { top: -6px; bottom: -6px; left: 0; right: 0; }   .todo-detail-head .btn-sm::after, .todo-detail-head .btn-close-detail::after { top: -2px; bottom: -2px; left: 0; right: 0; }   .btn-progress::after { top: -2px; bottom: -2px; left: 0; right: 0; }   .btn-icon-sm::after { top: -4px; bottom: -4px; left: -4px; right: -4px; }   .hint-link::after { top: -13px; bottom: -13px; left: 0; right: 0; }   .home-schedule-empty-primary::after, .home-schedule-empty-secondary::after { top: -2px; bottom: -2px; left: 0; right: 0; }     .sidebar.mobile-open .nav-link::after { display: block; top: -2px; bottom: -2px; left: 0; right: 0; }   .qm-name { padding: 13px 0; margin: -13px 0; }   .mobile-select-btn { min-width: 44px; } .btn-action-icon, .btn-quote-action { min-width: 44px; min-height: 44px; }   .home-m-remaining::after { top: -13px; bottom: -13px; }   .inbox-mail-connect-hint .hint-link::after { content: ""; position: absolute; top: -13px; bottom: -13px; left: -4px; right: -4px; } .inbox-mail-connect-hint .hint-dismiss { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -14px -12px -14px 0; }   .slide-over-close { min-width: 44px; min-height: 44px; }   .avatar-menu-item { min-height: 44px; }   .avatar-menu-item:not(.space-open-newtab) { display: flex; align-items: center; } a.avatar-menu-item.space-open-newtab { padding-top: 12px; padding-bottom: 12px; } .font-size-btn { min-height: 44px; }   .ios-nav-send, .compose-panel.m-full .compose-fixed-header .m-more, .compose-type-badge, .ai-theme-suggest-refresh, .compose-panel .m-rl-pill, .compose-toggle-btn, .btn-tag-remove, .compose-panel .btn-compose-tool, .notif-mark-all { position: relative; } .ios-nav-send::after, .compose-panel.m-full .compose-fixed-header .m-more::after, .compose-type-badge::after, .ai-theme-suggest-refresh::after, .compose-panel .m-rl-pill::after, .compose-toggle-btn::after, .btn-tag-remove::after, .compose-panel .btn-compose-tool::after, .notif-mark-all::after { content: ""; position: absolute; top: -12px; bottom: -12px; left: -6px; right: -6px; } .ios-nav-send::after, .btn-tag-remove::after { left: -16px; right: -16px; } .btn-tag-remove::after { top: -15px; bottom: -15px; }   .compose-panel .btn-add-recipient { position: relative; } .compose-panel .btn-add-recipient::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: -4px; right: -4px; } .compose-panel .btn-compose-tool::after { top: -2px; bottom: -2px; left: -2px; right: -2px; } .compose-panel [data-testid="SendMessageAttachButton"]::after { top: -4px; bottom: -4px; left: -4px; right: -4px; } }   @media (hover: none) { .pin-bar-row .pin-bar-row-note-edit, .pin-bar-row .pin-bar-row-remove, .pin-bar-row .pin-bar-row-due-ghost, .sc-deflist dd .sc-copy, .ai-chat-row .ai-chat-row-btn, .file-row .file-actions { opacity: 1; } .att-card .att-actions { opacity: 1; visibility: visible; } .cabinet-pdf-tab .cabinet-pdf-tab-close, .toast-incoming .toast-in-hover { visibility: visible; } .folder-item > .theme-fav-btn { display: inline-flex; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .tr-header-action, .tr-more-toggle, .tr-schedule-hero-close, .tr-today-btn, .tr-icon-btn, .tr-date-jump, .tr-seg-btn, .tr-pill, .tr-field-chip, .rt-ghost-btn, .theme-statusbar-more, .qm-name, .fcb-jump, .fcb-more, .btn-draft-delete, .reply-line-bar .rlb-kind, .reply-line-bar .rlb-to-name, .reply-line-bar .rlb-to-clear, .reply-line-bar .rlb-send { position: relative; }   .reply-line-bar .rlb-send::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; } .tr-header-action::after, .tr-more-toggle::after, .tr-schedule-hero-close::after, .tr-today-btn::after, .tr-icon-btn::after, .tr-date-jump::after, .tr-seg-btn::after, .tr-pill::after, .tr-field-chip::after, .rt-ghost-btn::after, .theme-statusbar-more::after, .qm-name::after, .fcb-jump::after, .fcb-more::after, .btn-draft-delete::after, .reply-line-bar .rlb-kind::after, .reply-line-bar .rlb-to-name::after, .reply-line-bar .rlb-to-clear::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; right: 0; }     .tr-header-action { min-width: 44px; } .tr-schedule-hero-close::after, .tr-icon-btn::after, .fcb-jump::after, .fcb-more::after { left: -2px; right: -2px; }   .tr-seg-btn::after, .tr-pill::after, .tr-field-chip::after { top: -4px; bottom: -4px; }   .theme-statusbar-more::after { top: -6px; bottom: -6px; }   .qm-name::after { top: -1px; bottom: -1px; }   .tr-more-toggle::after, .reply-line-bar .rlb-kind::after { top: -10px; bottom: -10px; left: -10px; right: -10px; }   .btn-draft-delete::after { top: -10px; bottom: -10px; left: -11px; right: -11px; }   .reply-line-bar .rlb-to-name::after { top: -13px; bottom: -13px; }   .reply-line-bar .rlb-to-clear::after { top: -13px; bottom: -13px; right: -19px; }   .mobile-detail-icon::after { top: -12px; bottom: -12px; left: -12px; right: -12px; } .home-m-remaining::after { top: -16px; bottom: -16px; }   .inbox-mail-connect-hint .hint-link::after, .hint-link::after { top: -16px; bottom: -16px; left: -9px; right: -9px; }     .tr-list-scroll { padding-top: 4px; padding-bottom: 4px; margin-top: -4px; margin-bottom: -4px; }   .theme-toolbar .theme-search { height: auto; } .theme-toolbar .theme-search input { min-height: 44px; }   .mobile-detail-nav { min-width: 44px; min-height: 44px; margin-left: -5px; margin-right: -5px; } .tr-time-input, .tr-project-input, .tr-content-input, .tr-search-input, .tr-member-select { min-height: 44px; } }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {   .inbox-mail-connect-hint .hint-dismiss::after { left: 0; } .inbox-mail-connect-hint .hint-link::after { right: 0; left: -18px; }     .tr-today-hide::after { left: -4px; right: -20px; top: -12px; bottom: -12px; } }