|
|
| :root { |
| --surface-50: #ffffff; |
| --surface-100: #f5f5f5; |
| --surface-200: #e5e5e5; |
| --surface-300: #d4d4d4; |
| --surface-400: #a3a3a3; |
| --surface-500: #737373; |
| --surface-600: #525252; |
| --surface-700: #404040; |
| --surface-800: #262626; |
| --surface-900: #171717; |
| --surface-950: #000000; |
| --radius: 8px; |
| --transition: all 0.2s ease; |
| } |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| transition: var(--transition); |
| } |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--surface-50); |
| color: var(--surface-900); |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--surface-200); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--surface-400); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary-500); |
| } |
| |
| .nav-item { |
| display: flex; |
| align-items: center; |
| padding: 10px 16px; |
| margin: 2px 0; |
| border-radius: var(--radius); |
| color: var(--surface-700); |
| text-decoration: none; |
| font-weight: 500; |
| position: relative; |
| } |
|
|
| .nav-item:hover { |
| background: var(--surface-200); |
| color: var(--surface-900); |
| } |
| .nav-item.active { |
| background: var(--surface-200); |
| color: var(--surface-900); |
| border-left: 3px solid var(--surface-900); |
| font-weight: 600; |
| } |
| .nav-item i { |
| width: 20px; |
| height: 20px; |
| margin-right: 12px; |
| stroke-width: 1.5; |
| } |
| |
| .dashboard-card { |
| background: var(--surface-50); |
| border: 1px solid var(--surface-200); |
| border-radius: var(--radius); |
| padding: 24px; |
| position: relative; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); |
| transition: all 0.3s ease; |
| } |
|
|
| .dashboard-card:hover { |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); |
| transform: translateY(-2px); |
| border-color: var(--surface-300); |
| } |
| .dashboard-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 24px; |
| } |
|
|
| .dashboard-header h2 { |
| font-size: 1.5rem; |
| font-weight: 600; |
| color: var(--surface-100); |
| } |
|
|
| .dashboard-header p { |
| color: var(--surface-400); |
| font-size: 0.875rem; |
| } |
|
|
| .section-content { |
| animation: fadeIn 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; |
| } |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 8px 16px; |
| border-radius: var(--radius); |
| font-weight: 500; |
| text-align: center; |
| white-space: nowrap; |
| cursor: pointer; |
| transition: var(--transition); |
| border: 1px solid var(--surface-200); |
| background: var(--surface-50); |
| color: var(--surface-900); |
| } |
|
|
| .btn:hover { |
| background: var(--surface-100); |
| border-color: var(--surface-300); |
| transform: translateY(-1px); |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
| } |
|
|
| .btn:active { |
| transform: translateY(0); |
| box-shadow: none; |
| } |
| .btn-primary { |
| background: var(--surface-900); |
| color: var(--surface-50); |
| border-color: var(--surface-900); |
| } |
|
|
| .btn-primary:hover { |
| background: var(--surface-800); |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1); |
| } |
| .btn-icon { |
| width: 36px; |
| height: 36px; |
| padding: 0; |
| border-radius: 50%; |
| background: var(--surface-800); |
| } |
|
|
| .input { |
| background: var(--surface-900); |
| border: 1px solid var(--surface-800); |
| border-radius: var(--radius); |
| padding: 10px 14px; |
| color: var(--surface-100); |
| width: 100%; |
| transition: var(--transition); |
| } |
|
|
| .input:focus { |
| outline: none; |
| border-color: var(--primary-500); |
| box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); |
| } |
| |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| background: var(--surface-200); |
| overflow: hidden; |
| transition: var(--transition); |
| } |
|
|
| .progress-value { |
| height: 100%; |
| border-radius: 3px; |
| background: var(--surface-800); |
| transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| .status-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 4px 10px; |
| border-radius: 9999px; |
| font-size: 0.7rem; |
| font-weight: 600; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| border: 1px solid; |
| } |
|
|
| .status-badge.active { |
| background: var(--surface-900); |
| color: var(--surface-50); |
| border-color: var(--surface-900); |
| } |
|
|
| .status-badge.pending { |
| background: var(--surface-50); |
| color: var(--surface-700); |
| border-color: var(--surface-300); |
| } |
|
|
| .status-badge.inactive { |
| background: var(--surface-100); |
| color: var(--surface-500); |
| border-color: var(--surface-200); |
| } |
| |
| .status-indicator { |
| position: relative; |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| border: 1px solid; |
| } |
| .status-indicator.active { |
| background: var(--surface-900); |
| border-color: var(--surface-900); |
| } |
| .status-indicator.pending { |
| background: var(--surface-50); |
| border-color: var(--surface-500); |
| } |
|
|
| .status-indicator.inactive { |
| background: var(--surface-100); |
| border-color: var(--surface-400); |
| } |
| |
| .chat-container { |
| background: var(--surface-50); |
| border-left: 1px solid var(--surface-200); |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| .chat-header { |
| padding: 16px; |
| border-bottom: 1px solid var(--surface-800); |
| background: var(--surface-900); |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| } |
|
|
| .chat-messages { |
| flex: 1; |
| padding: 16px; |
| overflow-y: auto; |
| } |
|
|
| .chat-message { |
| margin-bottom: 16px; |
| animation: fadeIn 0.3s ease-out; |
| } |
|
|
| .chat-input { |
| padding: 16px; |
| border-top: 1px solid var(--surface-800); |
| background: var(--surface-900); |
| position: sticky; |
| bottom: 0; |
| } |
|
|
| .message-bubble { |
| padding: 12px 16px; |
| border-radius: 12px; |
| max-width: 80%; |
| position: relative; |
| } |
| .message-bubble.user { |
| background: var(--surface-900); |
| color: white; |
| border-radius: 12px 12px 0 12px; |
| margin-left: auto; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
|
|
| .message-bubble.agent { |
| background: var(--surface-100); |
| color: var(--surface-900); |
| border-radius: 12px 12px 12px 0; |
| margin-right: auto; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| border: 1px solid var(--surface-200); |
| } |
| .message-time { |
| font-size: 0.75rem; |
| color: var(--surface-400); |
| margin-top: 4px; |
| text-align: right; |
| } |
| |
| .loading { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .loading::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); |
| animation: loading 1.5s infinite; |
| } |
|
|
| @keyframes loading { |
| 0% { |
| left: -100%; |
| } |
| 100% { |
| left: 100%; |
| } |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .w-96 { |
| width: 320px; |
| } |
| |
| .w-64 { |
| width: 240px; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .flex { |
| flex-direction: column; |
| } |
| |
| .w-64 { |
| width: 100%; |
| height: auto; |
| } |
| |
| .w-96 { |
| width: 100%; |
| height: 300px; |
| } |
| } |
| |
| *:focus { |
| outline: 2px solid var(--surface-700); |
| outline-offset: 2px; |
| } |
|
|
| button:focus, |
| input:focus, |
| .nav-item:focus { |
| outline: 2px solid var(--surface-800); |
| outline-offset: 2px; |
| } |
|
|
| .btn:focus { |
| box-shadow: 0 0 0 3px rgba(0,0,0,0.1); |
| } |
|
|
| .input:focus { |
| box-shadow: 0 0 0 3px rgba(0,0,0,0.1); |
| } |
| |
| @media print { |
| .w-64, |
| .w-96 { |
| display: none; |
| } |
| |
| .flex-1 { |
| width: 100%; |
| } |
| } |
|
|
| |
| .chart-placeholder { |
| background: var(--surface-50); |
| border: 1px dashed var(--surface-300); |
| } |
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0px); |
| } |
| 50% { |
| transform: translateY(-10px); |
| } |
| } |
| |
| .notification { |
| position: fixed; |
| top: 24px; |
| right: 24px; |
| z-index: 1000; |
| width: 320px; |
| padding: 16px; |
| border-radius: var(--radius); |
| background: white; |
| border: 1px solid var(--surface-300); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); |
| display: flex; |
| align-items: flex-start; |
| animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| border-left: 4px solid var(--surface-800); |
| } |
| .notification { |
| border-left-color: var(--surface-900); |
| } |
| .notification-icon { |
| margin-right: 12px; |
| flex-shrink: 0; |
| } |
|
|
| .notification-content { |
| flex: 1; |
| } |
|
|
| .notification-title { |
| font-weight: 600; |
| margin-bottom: 4px; |
| } |
|
|
| .notification-message { |
| font-size: 0.875rem; |
| color: var(--surface-400); |
| } |
|
|
| .notification-close { |
| background: none; |
| border: none; |
| color: var(--surface-400); |
| cursor: pointer; |
| margin-left: 8px; |
| } |
|
|
| @keyframes slideInRight { |
| from { |
| opacity: 0; |
| transform: translateX(100%); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| border-bottom: 1px solid var(--surface-200); |
| } |
| .hover-scale { |
| transition: all 0.2s ease; |
| } |
|
|
| .hover-scale:hover { |
| transform: scale(1.02); |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); |
| } |
|
|
| .hover-lift { |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
| } |
|
|
| .hover-lift:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .shadow-soft { |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .shadow-medium { |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| } |
|
|
| .shadow-hard { |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .shadow-xs { |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); |
| } |
|
|
| .shadow-sm { |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .shadow-md { |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); |
| } |
|
|
| .shadow-lg { |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); |
| } |
| |
| @media (max-width: 1024px) { |
| .sidebar { |
| width: 240px; |
| } |
| |
| .chat-panel { |
| width: 300px; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| position: fixed; |
| z-index: 100; |
| height: 100vh; |
| } |
| |
| .sidebar.active { |
| transform: translateX(0); |
| } |
| |
| .chat-panel { |
| position: fixed; |
| right: -100%; |
| top: 0; |
| height: 100vh; |
| transition: transform 0.3s ease-in-out; |
| } |
| |
| .chat-panel.active { |
| transform: translateX(-100%); |
| } |
| } |
|
|
