/* --- NEW: FIX FOR WEEBLY OVERLAY --- */
/* This single rule lifts the entire portal above the footer overlay */
#xp-portal-wrapper {
position: relative;
z-index: 1000000; /* Higher than the overlay's 999999 */
}
/* --- END FIX --- */
/* Reset and base styles with !important */
* {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
html, body {
width: 100% !important;
height: 100% !important;
font-size: 16px !important;
line-height: 1.5 !important;
background-color: #f1f1f1 !important;
}
body {
display: flex !important;
flex-direction: column !important;
overflow-x: hidden !important; /* Existing */
position: relative !important; /* Added for panel context if needed, though fixed position panel usually doesn't require parent relative */
}
/* Form Containers */
.xp-auth-container {
max-width: 500px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 30px !important;
background-color: white !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
border-radius: 8px !important;
margin-top: 80px !important;
}
.xp-auth-header {
text-align: center !important;
margin-bottom: 30px !important;
}
.xp-logo-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.xp-logo-icon {
width: 50px !important;
height: 50px !important;
background-color: #3a0a62 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 15px !important;
color: white !important;
font-weight: bold !important;
font-size: 20px !important;
}
.xp-auth-header h2 {
font-size: 1.8rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
}
.xp-auth-header p {
color: #666 !important;
font-size: 1rem !important;
}
.xp-form-group {
margin-bottom: 25px !important;
position: relative !important; /* Needed for password toggle */
}
.xp-form-label {
display: block !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
color: #444 !important;
font-size: 0.95rem !important;
}
.xp-form-input {
width: 100% !important;
padding: 14px 15px !important;
/* Add padding-right for password toggle */
padding-right: 45px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 1rem !important;
transition: all 0.2s ease !important;
}
/* Adjust padding for non-password inputs */
.xp-form-input:not([type="password"]) {
padding-right: 15px !important;
}
.xp-form-input:focus {
border-color: #3a0a62 !important;
box-shadow: 0 0 0 3px rgba(58, 10, 98, 0.1) !important;
outline: none !important;
}
/* --- UPDATED: Password Toggle Button --- */
.xp-password-toggle {
position: absolute !important;
right: 10px !important;
/* Adjust top based on input height and padding */
top: calc(50% + 4px) !important; /* Adjust 4px based on label height/margin */
transform: translateY(-50%) !important; /* Center vertically relative to its own size */
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 5px !important;
color: #3a0a62 !important; /* Purple color */
z-index: 2 !important;
width: 20px !important; /* Fixed width */
height: 20px !important; /* Fixed height */
display: flex !important; /* Use flex to center icon */
align-items: center !important;
justify-content: center !important;
}
.xp-password-toggle svg {
width: 18px !important; /* Slightly smaller icon size */
height: 18px !important; /* Slightly smaller icon size */
display: block !important; /* Ensure SVG behaves like a block */
}
/* --- End UPDATED Styles --- */
.xp-form-button {
width: 100% !important;
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 15px !important;
font-size: 1.05rem !important;
font-weight: 500 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
margin-top: 15px !important;
}
.xp-form-button:hover {
background-color: #4b0c78 !important;
}
.xp-form-button:disabled {
background-color: #cccccc !important;
cursor: not-allowed !important;
}
.xp-error-text {
color: #e53935 !important;
font-size: 0.85rem !important;
margin-top: 5px !important;
display: none !important;
}
.xp-error-text.active {
display: block !important;
}
.xp-success-text {
color: #4CAF50 !important;
font-size: 0.9rem !important;
margin: 10px 0 !important;
display: none !important;
text-align: center !important;
}
.xp-success-text.active {
display: block !important;
}
/* Login helpers */
.xp-login-helpers {
display: flex !important;
justify-content: space-between !important;
margin-top: 15px !important;
margin-bottom: 25px !important;
}
.xp-login-helper {
color: #3a0a62 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.xp-login-helper:hover {
color: #4b0c78 !important;
text-decoration: underline !important;
}
/* Success elements */
.xp-success-container {
text-align: center !important;
}
.xp-success-icon {
width: 70px !important;
height: 70px !important;
background-color: #4CAF50 !important;
color: white !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px auto !important;
font-size: 32px !important;
}
.xp-success-title {
font-size: 1.5rem !important;
color: #333 !important;
margin-bottom: 10px !important;
font-weight: 600 !important;
}
.xp-success-text { /* This one seems duplicated, but keeping it as per original */
color: #666 !important;
margin-bottom: 25px !important;
}
.xp-employee-id {
text-align: center !important;
background-color: #f5f5f5 !important;
padding: 15px !important;
border-radius: 6px !important;
font-family: monospace !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
color: #333 !important;
letter-spacing: 1px !important;
margin: 15px 0 !important;
border: 1px dashed #aaa !important;
}
.xp-id-message {
font-size: 0.9rem !important;
color: #d32f2f !important;
text-align: center !important;
margin: 15px 0 30px 0 !important;
font-weight: 500 !important;
}
/* Security Question Styles - NEW */
.xp-security-questions-container {
margin-top: 20px !important;
}
.xp-security-question-intro {
font-size: 0.95rem !important;
color: #333 !important;
margin-bottom: 20px !important;
background-color: #e8f5e9 !important;
border-left: 3px solid #4CAF50 !important;
padding: 15px !important;
border-radius: 4px !important;
}
.xp-security-question-header {
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 5px !important;
}
.xp-security-question-item {
margin-bottom: 20px !important;
border-bottom: 1px solid #f0f0f0 !important;
padding-bottom: 20px !important;
}
.xp-security-question-select {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
margin-bottom: 10px !important;
background-color: #f9f9f9 !important;
color: #333 !important;
font-size: 0.95rem !important;
}
.xp-security-question-input {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 0.95rem !important;
}
.xp-security-question-button {
width: 100% !important;
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 12px !important;
font-size: 1rem !important;
font-weight: 500 !important;
border-radius: 6px !important;
cursor: pointer !important;
margin-top: 10px !important;
}
.xp-security-question-button:hover {
background-color: #4b0c78 !important;
}
/* Animation for success */
@keyframes checkmark {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.xp-checkmark {
animation: checkmark 0.5s ease-in-out forwards;
}
/* Chat container */
.xp-chat-container {
flex: 1 !important;
display: none !important;
flex-direction: column !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
background-color: white !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
height: 100vh !important;
overflow: hidden !important;
}
.xp-chat-container.active {
display: flex !important;
}
/* Enhanced Header */
.xp-header {
background: linear-gradient(135deg, #3a0a62 0%, #5a1a82 100%) !important;
color: white !important;
padding: 15px 20px !important;
position: relative !important;
flex-shrink: 0 !important;
height: auto !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
z-index: 10 !important;
}
.xp-header-content {
display: flex !important;
flex-direction: column !important;
}
.xp-header-logo {
display: flex !important;
align-items: center !important;
margin-bottom: 5px !important;
}
.xp-header-logo .xp-logo-icon {
width: 32px !important;
height: 32px !important;
background-color: white !important;
color: #3a0a62 !important;
font-size: 14px !important;
margin-right: 10px !important;
}
.xp-header h2 {
font-size: 1.3rem !important;
font-weight: 600 !important;
color: white !important;
letter-spacing: 0.5px !important;
margin: 0 !important;
}
.xp-header p {
font-size: 0.8rem !important;
font-weight: normal !important;
color: rgba(255, 255, 255, 0.85) !important;
letter-spacing: 0.3px !important;
}
.xp-header-controls {
display: flex !important;
align-items: center !important;
}
.xp-agent-info {
display: flex !important;
align-items: center !important;
margin-right: 15px !important;
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.8rem !important;
}
.xp-agent-profile-pic {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background-color: #e0e0e0 !important;
border: 2px solid rgba(255, 255, 255, 0.7) !important;
margin-right: 10px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.xp-agent-profile-pic img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-agent-profile-pic .xp-profile-initials {
font-size: 14px !important;
font-weight: 600 !important;
color: #3a0a62 !important;
}
.xp-agent-name-id {
display: flex !important;
flex-direction: column !important;
text-align: left !important;
}
.xp-agent-id {
font-weight: 600 !important;
color: white !important;
font-size: 0.85rem !important;
}
.xp-logout-btn {
background-color: rgba(255, 255, 255, 0.15) !important;
color: white !important;
border: none !important;
padding: 6px 12px !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 0.85rem !important;
transition: background-color 0.2s ease !important;
}
.xp-logout-btn:hover {
background-color: rgba(255, 255, 255, 0.25) !important;
}
.xp-header-status {
display: flex !important;
align-items: center !important;
background-color: rgba(255,255,255,0.15) !important;
padding: 5px 10px !important;
border-radius: 12px !important;
font-size: 0.75rem !important;
}
.xp-status-dot {
width: 8px !important;
height: 8px !important;
background-color: #4CAF50 !important;
border-radius: 50% !important;
margin-right: 5px !important;
animation: pulse 2s infinite !important;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 5px rgba(76, 175, 80, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
/* Main layout with sidebar */
.xp-main-content {
display: flex !important;
flex: 1 !important;
overflow: hidden !important;
position: relative !important; /* Added for panel context if map is inside */
}
/* Collapsible Sidebar */
.xp-sidebar {
background-color: #3a0a62 !important;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1) !important;
color: white !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
min-width: 60px !important;
transition: all 0.3s ease !important;
z-index: 2 !important;
}
.xp-sidebar-expanded {
width: 200px !important;
}
.xp-sidebar-collapsed {
width: 60px !important;
}
.xp-sidebar-toggle {
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 40px !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.xp-sidebar-toggle svg {
width: 20px !important;
height: 20px !important;
color: white !important;
transition: transform 0.3s ease !important;
}
.xp-sidebar-toggle.collapsed svg {
transform: rotate(180deg) !important;
}
.xp-sidebar-nav {
list-style: none !important;
margin-top: 10px !important;
}
.xp-sidebar-item {
position: relative !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
padding: 10px 15px !important;
transition: background 0.2s ease !important;
}
.xp-sidebar-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.xp-sidebar-item.active {
background: rgba(255, 255, 255, 0.2) !important;
}
.xp-sidebar-item.disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
}
.xp-sidebar-icon {
width: 22px !important;
height: 22px !important;
margin-right: 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.xp-sidebar-text {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 0.9rem !important;
opacity: 1 !important;
transition: opacity 0.2s ease !important;
}
.xp-sidebar-collapsed .xp-sidebar-text {
opacity: 0 !important;
width: 0 !important;
}
/* Messages area with security background */
.xp-chat-messages {
flex: 1 !important;
overflow-y: auto !important;
padding: 15px !important;
background-color: #f7f9fb !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
scroll-behavior: smooth !important;
}
.xp-chat-background {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
opacity: 0.05 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23330033' fill-opacity='0.4'%3E%3Cpath d='M10 10a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0 0a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM60 35a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0 0a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM70 70a15 15 0 1 1 0-30 15 15 0 0 1 0 30zm0 0a15 15 0 1 1 0-30 15 15 0 0 1 0 30zM20 60a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0 0a7 7 0 1 1 0-14 7 7 0 0 1 0 14zM90 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0 0a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM110 90a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0 0a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM30 100a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
background-size: 120px !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Enhanced message bubbles */
.xp-message-wrapper {
position: relative !important;
display: flex !important;
flex-direction: column !important;
max-width: 75% !important;
margin-bottom: 20px !important;
z-index: 1 !important;
}
.xp-customer-wrapper {
align-self: flex-start !important;
align-items: flex-start !important;
}
.xp-agent-wrapper {
align-self: flex-end !important;
align-items: flex-end !important;
}
.xp-bot-wrapper {
align-self: flex-start !important;
align-items: flex-start !important;
}
.xp-message-profile-container {
display: flex !important;
align-items: flex-end !important;
margin-bottom: 4px !important;
}
.xp-customer-wrapper .xp-message-profile-container {
flex-direction: row !important;
}
.xp-agent-wrapper .xp-message-profile-container {
flex-direction: row-reverse !important;
}
.xp-bot-wrapper .xp-message-profile-container {
flex-direction: row !important;
}
.xp-message-profile {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 50% !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
.xp-agent-wrapper .xp-message-profile {
margin-left: 8px !important;
}
.xp-customer-wrapper .xp-message-profile,
.xp-bot-wrapper .xp-message-profile {
margin-right: 8px !important;
}
.xp-message-profile img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-profile-initials {
width: 100% !important;
height: 100% !important;
background-color: #e0e0e0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #333 !important;
}
.xp-message-bubble {
display: flex !important;
flex-direction: column !important;
}
.xp-message {
padding: 10px 15px !important;
border-radius: 16px !important;
word-wrap: break-word !important;
font-size: 0.95rem !important;
line-height: 1.4 !important;
position: relative !important;
box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
}
.xp-message em {
font-style: italic !important;
}
.xp-message strong {
font-weight: bold !important;
}
.xp-customer-message {
background-color: white !important;
color: #303030 !important;
}
.xp-agent-message {
background-color: #e3e0f3 !important;
color: #303030 !important;
}
.xp-bot-message {
background-color: #f2f2f7 !important;
color: #303030 !important;
}
.xp-message-info {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
font-size: 0.7rem !important;
color: #999 !important;
margin-top: 4px !important;
padding: 0 5px !important;
}
.xp-message-time {
margin-right: 4px !important;
}
.xp-message-status {
font-size: 0.7rem !important;
margin-left: 4px !important;
color: #a7a7a7 !important;
}
.xp-status-delivered {
color: #a7a7a7 !important;
}
.xp-status-read {
color: #4fc3f7 !important;
}
/* Typing indicator */
.xp-typing-indicator {
padding: 8px 15px !important;
background-color: rgba(255, 255, 255, 0.8) !important;
border-radius: 15px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
color: #555 !important;
font-size: 0.85rem !important;
margin-bottom: 15px !important;
align-self: flex-start !important;
display: flex !important;
align-items: center !important;
max-width: 50% !important;
z-index: 1 !important;
}
.xp-typing-animation {
display: flex !important;
margin-left: 8px !important;
}
.xp-typing-dot {
background-color: #999 !important;
border-radius: 50% !important;
width: 6px !important;
height: 6px !important;
margin: 0 2px !important;
animation: typing-animation 1.5s infinite ease-in-out !important;
}
.xp-typing-dot:nth-child(1) {
animation-delay: 0s !important;
}
.xp-typing-dot:nth-child(2) {
animation-delay: 0.2s !important;
}
.xp-typing-dot:nth-child(3) {
animation-delay: 0.4s !important;
}
@keyframes typing-animation {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-4px);
}
}
.xp-typing-indicator.active {
display: flex !important;
}
.xp-typing-indicator:not(.active) {
display: none !important;
}
/* Chat content area */
.xp-chat-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
position: relative !important; /* For panel context if map is inside chat-content */
}
/* Enhanced Input area */
.xp-chat-input {
display: flex !important;
padding: 12px 15px !important;
background-color: white !important;
border-top: 1px solid #e6e6e6 !important;
position: relative !important;
flex-shrink: 0 !important;
box-shadow: 0 -1px 5px rgba(0,0,0,0.05) !important;
}
.xp-chat-input input {
flex: 1 !important;
padding: 12px 15px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 25px !important;
outline: none !important;
font-size: 0.95rem !important;
background-color: #f5f5f5 !important;
color: #333 !important;
transition: all 0.2s ease !important;
}
.xp-chat-input input:focus {
border-color: #3a0a62 !important;
background-color: white !important;
box-shadow: 0 0 0 2px rgba(58, 10, 98, 0.1) !important;
}
/* Disabled state for input */
.xp-chat-input input:disabled {
background-color: #e9ecef !important;
color: #6c757d !important;
cursor: not-allowed !important;
}
.xp-chat-input button {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
width: 45px !important;
height: 45px !important;
border-radius: 50% !important;
cursor: pointer !important;
margin-left: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.2s ease !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
/* Disabled state for buttons */
.xp-chat-input button:disabled {
background-color: #cccccc !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}
.xp-chat-input button svg {
width: 20px !important;
height: 20px !important;
}
.xp-chat-input button:hover:not(:disabled) { /* Updated hover selector */
background-color: #4b0c78 !important;
}
/* End Chat Button */
.xp-end-chat-btn {
background-color: #e53935 !important;
color: white !important;
border: none !important;
width: 45px !important;
height: 45px !important;
border-radius: 50% !important;
cursor: pointer !important;
margin-left: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.2s ease !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
.xp-end-chat-btn:hover {
background-color: #c62828 !important;
}
.xp-end-chat-btn svg {
width: 20px !important;
height: 20px !important;
}
/* AI Button */
.xp-ai-btn {
background-color: #4CAF50 !important;
color: white !important;
border: none !important;
width: 45px !important;
height: 45px !important;
border-radius: 50% !important;
cursor: pointer !important;
margin-left: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.2s ease !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
position: relative !important;
overflow: hidden !important;
}
.xp-ai-btn:hover:not(:disabled) { /* Updated hover selector */
background-color: #388E3C !important;
}
.xp-ai-btn img {
width: 28px !important;
height: 28px !important;
object-fit: cover !important;
border-radius: 50% !important;
}
/* AI Suggestions Container */
.xp-ai-suggestions {
display: none !important;
padding: 15px !important;
background-color: #f9f5ff !important;
border-top: 1px solid #e6e6e6 !important;
flex-direction: column !important;
position: relative !important;
}
.xp-ai-suggestions.active {
display: flex !important;
}
.xp-ai-suggestions-header {
display: flex !important;
align-items: center !important;
margin-bottom: 15px !important;
justify-content: space-between !important;
}
.xp-ai-suggestions-title {
display: flex !important;
align-items: center !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: #3a0a62 !important;
}
.xp-ai-actions {
display: flex !important;
gap: 10px !important;
}
.xp-ai-regenerate, .xp-ai-discard {
background-color: transparent !important;
border: 1px solid #3a0a62 !important;
color: #3a0a62 !important;
padding: 6px 12px !important;
font-size: 0.85rem !important;
border-radius: 4px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
}
.xp-ai-regenerate:hover, .xp-ai-discard:hover {
background-color: #3a0a62 !important;
color: white !important;
}
.xp-ai-regenerate svg, .xp-ai-discard svg {
margin-right: 5px !important;
width: 14px !important;
height: 14px !important;
}
.xp-ai-suggestions-content {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.xp-ai-suggestion {
background-color: white !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
padding: 15px !important;
position: relative !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.xp-ai-suggestion:hover {
border-color: #3a0a62 !important;
box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}
.xp-suggestion-text {
font-size: 0.95rem !important;
color: #333 !important;
margin-bottom: 12px !important;
line-height: 1.5 !important;
}
.xp-suggestion-actions {
display: flex !important;
gap: 10px !important;
}
.xp-suggestion-action {
padding: 6px 12px !important;
font-size: 0.85rem !important;
border-radius: 4px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
border: none !important;
}
.xp-action-copy {
background-color: #4CAF50 !important;
color: white !important;
}
.xp-action-copy:hover {
background-color: #388E3C !important;
}
.xp-action-edit {
background-color: #2196F3 !important;
color: white !important;
}
.xp-action-edit:hover {
background-color: #1976D2 !important;
}
.xp-suggestion-action svg {
margin-right: 6px !important;
width: 14px !important;
height: 14px !important;
}
.xp-ai-loading {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
}
.xp-ai-loading-text {
display: flex !important;
align-items: center !important;
color: #3a0a62 !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
}
/* Customer Request Modal */
.xp-request-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
animation: fadeIn 0.3s ease-out !important;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.xp-request-modal.active {
display: flex !important;
}
.xp-request-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
margin: 0 auto !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
}
@keyframes slideInUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.xp-request-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.xp-request-header svg {
margin-right: 10px !important;
}
.xp-request-body {
padding: 20px !important;
}
.xp-request-customer {
display: flex !important;
align-items: center !important;
margin-bottom: 15px !important;
justify-content: center !important;
}
.xp-request-avatar {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
background-color: #f0f0f0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 15px !important;
font-weight: 600 !important;
color: #333 !important;
font-size: 24px !important;
flex-shrink: 0 !important;
}
.xp-request-info {
flex: 1 !important;
}
.xp-request-name {
font-weight: 600 !important;
font-size: 1.2rem !important;
color: #333 !important;
margin-bottom: 5px !important;
}
.xp-request-email {
font-size: 0.9rem !important;
color: #666 !important;
}
.xp-request-waiting {
background-color: #fff8e1 !important;
border-left: 3px solid #ff9800 !important;
padding: 12px 15px !important;
color: #795548 !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 500 !important;
}
.xp-request-waiting svg {
margin-right: 10px !important;
color: #ff9800 !important;
}
.xp-request-actions {
display: flex !important;
gap: 10px !important;
}
.xp-request-btn {
flex: 1 !important;
padding: 12px !important;
text-align: center !important;
border-radius: 4px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
border: none !important;
font-size: 1rem !important;
}
.xp-request-accept {
background-color: #3a0a62 !important;
color: white !important;
}
.xp-request-accept:hover {
background-color: #4b0c78 !important;
}
.xp-request-transfer {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
}
.xp-request-transfer:hover {
background-color: #e0e0e0 !important;
}
.xp-transfer-success {
margin-top: 15px !important;
background-color: #e8f5e9 !important;
border-left: 3px solid #4caf50 !important;
padding: 10px 15px !important;
color: #2e7d32 !important;
display: none !important;
text-align: center !important;
}
.xp-transfer-success.active {
display: block !important;
}
/* Customer Info Modal */
.xp-info-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-info-modal.active {
display: flex !important;
}
.xp-info-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 450px !important;
max-height: 90vh !important;
overflow-y: auto !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-info-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.xp-info-header svg {
margin-right: 10px !important;
}
.xp-info-close {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.7) !important;
cursor: pointer !important;
padding: 5px !important;
}
.xp-info-close:hover {
color: white !important;
}
.xp-info-body {
padding: 20px !important;
}
.xp-info-section {
margin-bottom: 20px !important;
}
.xp-info-section-title {
font-weight: 600 !important;
color: #333 !important;
font-size: 1rem !important;
border-bottom: 1px solid #eee !important;
padding-bottom: 8px !important;
margin-bottom: 12px !important;
}
.xp-info-row {
display: flex !important;
margin-bottom: 10px !important;
}
.xp-info-label {
width: 140px !important;
font-weight: 500 !important;
color: #555 !important;
flex-shrink: 0 !important;
}
.xp-info-value {
flex: 1 !important;
color: #333 !important;
}
/* Other modals styling */
.xp-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
}
.xp-modal.active {
display: flex !important;
}
.xp-modal-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 450px !important;
max-height: 90vh !important;
overflow-y: auto !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-modal-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.xp-modal-close {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.7) !important;
cursor: pointer !important;
padding: 5px !important;
}
.xp-modal-close:hover {
color: white !important;
}
.xp-modal-body {
padding: 20px !important;
}
/* Feature not available message */
.xp-feature-unavailable {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 30px !important;
text-align: center !important;
}
.xp-feature-unavailable svg {
width: 60px !important;
height: 60px !important;
color: #9e9e9e !important;
margin-bottom: 15px !important;
}
.xp-feature-unavailable h3 {
font-size: 1.2rem !important;
color: #555 !important;
margin-bottom: 10px !important;
}
.xp-feature-unavailable p {
color: #777 !important;
max-width: 300px !important;
}
/* Profile Picture Upload */
.xp-profile-upload {
margin-top: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
}
.xp-profile-upload-title {
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #333 !important;
margin-bottom: 15px !important;
text-align: center !important;
}
.xp-profile-preview {
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
background-color: #f0f0f0 !important;
border: 2px solid #e0e0e0 !important;
overflow: hidden !important;
margin-bottom: 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.xp-profile-preview img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-profile-initials-large {
font-size: 40px !important;
font-weight: 600 !important;
color: #3a0a62 !important;
}
.xp-profile-upload-btn {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
padding: 8px 15px !important;
border-radius: 4px !important;
font-size: 0.9rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-profile-upload-btn:hover {
background-color: #e9e9e9 !important;
}
.xp-profile-input {
display: none !important;
}
.xp-profile-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
}
.xp-profile-preview:hover .xp-profile-overlay {
opacity: 1 !important;
}
.xp-profile-overlay-btn {
background-color: white !important;
color: #333 !important;
border: none !important;
padding: 5px 10px !important;
border-radius: 4px !important;
font-size: 0.8rem !important;
cursor: pointer !important;
}
/* Date separator */
.xp-date-separator {
text-align: center !important;
color: #888 !important;
font-size: 0.8rem !important;
margin: 15px 0 !important;
position: relative !important;
z-index: 1 !important;
}
.xp-date-separator:before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
border-top: 1px solid #e0e0e0 !important;
z-index: -1 !important;
}
.xp-date-separator span {
background-color: #f7f9fb !important;
padding: 0 10px !important;
}
/* Account Recovery Modals */
.xp-recovery-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000 !important;
}
.xp-recovery-modal.active {
display: flex !important;
}
.xp-recovery-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-recovery-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-radius: 8px 8px 0 0 !important;
}
.xp-recovery-header svg {
margin-right: 10px !important;
}
/* Added xp-recovery-close */
.xp-recovery-close {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.7) !important;
cursor: pointer !important;
padding: 5px !important;
font-size: 1.5rem !important;
line-height: 1 !important;
}
.xp-recovery-close:hover {
color: white !important;
}
.xp-recovery-body {
padding: 20px !important;
}
.xp-recovery-message {
margin-bottom: 20px !important;
color: #555 !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
.xp-recovery-success {
background-color: #e8f5e9 !important;
border-left: 3px solid #4caf50 !important;
padding: 10px 15px !important;
color: #2e7d32 !important;
margin: 15px 0 !important;
display: none !important;
}
.xp-recovery-success.active {
display: block !important;
}
.xp-recovery-error {
background-color: #ffebee !important;
border-left: 3px solid #f44336 !important;
padding: 10px 15px !important;
color: #c62828 !important;
margin: 15px 0 !important;
display: none !important;
}
.xp-recovery-error.active {
display: block !important;
}
.xp-recovery-id-display {
background-color: #f5f5f5 !important;
padding: 15px !important;
border-radius: 6px !important;
font-family: monospace !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #333 !important;
letter-spacing: 1px !important;
text-align: center !important;
margin: 15px 0 !important;
border: 1px dashed #aaa !important;
display: none !important;
}
.xp-recovery-id-display.active {
display: block !important;
}
.xp-recovery-actions {
display: flex !important;
gap: 10px !important;
margin-top: 20px !important;
}
.xp-recovery-button {
flex: 1 !important;
padding: 10px 15px !important;
font-weight: 500 !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-align: center !important;
}
.xp-recovery-primary {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
}
.xp-recovery-primary:hover {
background-color: #4b0c78 !important;
}
.xp-recovery-secondary {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
}
.xp-recovery-secondary:hover {
background-color: #e0e0e0 !important;
}
/* Security Questions Modal - NEW */
.xp-security-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 2000 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-security-modal.active {
display: flex !important;
}
.xp-security-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 500px !important;
animation: slideInUp 0.3s ease-out !important;
max-height: 90vh !important;
overflow-y: auto !important;
}
.xp-security-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
}
.xp-security-header svg {
margin-right: 10px !important;
}
.xp-security-body {
padding: 20px !important;
}
.xp-security-message {
background-color: #e8f5e9 !important;
border-left: 3px solid #4caf50 !important;
padding: 15px !important;
color: #2e7d32 !important;
margin-bottom: 20px !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
.xp-security-question {
margin-bottom: 20px !important;
border-bottom: 1px solid #f0f0f0 !important;
padding-bottom: 20px !important;
}
.xp-security-label {
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
display: block !important;
}
.xp-security-select {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 0.95rem !important;
margin-bottom: 15px !important;
background-color: #f9f9f9 !important;
}
.xp-security-input {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 0.95rem !important;
}
.xp-security-actions {
margin-top: 20px !important;
display: flex !important;
gap: 10px !important;
justify-content: flex-end !important;
}
.xp-security-button {
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-security-primary {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
}
.xp-security-primary:hover {
background-color: #4b0c78 !important;
}
.xp-security-secondary {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
}
.xp-security-secondary:hover {
background-color: #e0e0e0 !important;
}
.xp-security-verification {
padding: 20px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 6px !important;
margin-bottom: 20px !important;
}
.xp-security-error {
background-color: #ffebee !important;
border-left: 3px solid #f44336 !important;
padding: 10px 15px !important;
color: #c62828 !important;
margin: 15px 0 !important;
display: none !important;
}
.xp-security-error.active {
display: block !important;
}
/* Required Security Action Modal - NEW */
.xp-action-required-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 2000 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-action-required-modal.active {
display: flex !important;
}
.xp-action-required-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 500px !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-action-required-header {
background-color: #ff9800 !important; /* Orange for alert */
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.xp-action-required-header svg {
margin-right: 10px !important;
}
.xp-action-required-body {
padding: 20px !important;
}
.xp-action-required-title {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 15px !important;
text-align: center !important;
}
.xp-action-required-message {
background-color: #fff8e1 !important;
border-left: 3px solid #ff9800 !important;
padding: 15px !important;
color: #795548 !important;
margin-bottom: 20px !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
/* Performance Modal & Quiz Modal - Redesigned */
.xp-performance-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-performance-modal.active {
display: flex !important;
}
.xp-performance-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 900px !important; /* Increased width */
max-height: 85vh !important; /* Limited height to avoid footer overlap */
animation: slideInUp 0.3s ease-out !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.xp-performance-header {
background: linear-gradient(135deg, #3a0a62 0%, #5a1a82 100%) !important;
color: white !important;
padding: 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-radius: 8px 8px 0 0 !important;
}
.xp-performance-header-title {
display: flex !important;
align-items: center !important;
}
.xp-performance-header svg {
margin-right: 10px !important;
width: 24px !important;
height: 24px !important;
}
.xp-performance-body {
padding: 20px !important;
display: flex !important;
flex-direction: row !important; /* Changed to row layout */
gap: 20px !important;
overflow-y: auto !important; /* Scroll only the body if needed */
max-height: calc(85vh - 80px) !important; /* Subtract header height */
}
.xp-performance-main {
flex: 3 !important; /* Main content takes more space */
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important; /* Add scroll to main section */
max-height: calc(85vh - 80px) !important; /* Ensure scrollable */
}
.xp-performance-sidebar {
flex: 2 !important; /* Sidebar for Cortex Scholar */
border-left: 1px solid #eee !important;
padding-left: 20px !important;
overflow-y: auto !important; /* Add scroll to sidebar section */
max-height: calc(85vh - 80px) !important; /* Ensure scrollable */
}
.xp-performance-profile {
display: flex !important;
align-items: center !important;
margin-bottom: 20px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #eee !important;
}
.xp-performance-avatar {
width: 70px !important;
height: 70px !important;
border-radius: 50% !important;
background-color: #f0f0f0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 15px !important;
font-weight: 600 !important;
color: #3a0a62 !important;
font-size: 30px !important;
flex-shrink: 0 !important;
border: 2px solid #3a0a62 !important;
overflow: hidden !important;
}
.xp-performance-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-performance-info {
flex: 1 !important;
}
.xp-performance-name {
font-weight: 600 !important;
font-size: 1.2rem !important;
color: #333 !important;
margin-bottom: 5px !important;
}
.xp-performance-id {
font-size: 0.9rem !important;
color: #666 !important;
margin-bottom: 5px !important;
}
.xp-performance-status {
display: inline-block !important;
padding: 4px 8px !important;
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
border-radius: 4px !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
}
/* --- NEW: Performance Metrics Explanation Section --- */
.xp-performance-explanation {
margin-bottom: 25px !important;
padding: 15px !important;
background-color: #f9f9f9 !important;
border: 1px solid #eee !important;
border-radius: 6px !important;
}
.xp-explanation-title {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #3a0a62 !important;
margin-bottom: 15px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #eee !important;
}
.xp-explanation-section {
margin-bottom: 15px !important;
}
.xp-explanation-section h4 {
font-size: 1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 8px !important;
}
.xp-explanation-section p, .xp-explanation-section ul {
font-size: 0.9rem !important;
color: #555 !important;
line-height: 1.5 !important;
margin-bottom: 5px !important;
}
.xp-explanation-section ul {
list-style-type: disc !important;
margin-left: 20px !important;
padding-left: 5px !important;
}
.xp-explanation-section ul li {
margin-bottom: 3px !important;
}
.xp-explanation-section code {
font-family: monospace !important;
background-color: #e8e8e8 !important;
padding: 2px 5px !important;
border-radius: 3px !important;
font-size: 0.85rem !important;
}
.xp-explanation-section strong {
font-weight: 600 !important;
color: #333 !important;
}
/* --- END NEW: Performance Metrics Explanation Section --- */
/* UPDATED: Main Dashboard Metrics Grid */
.xp-metrics {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
gap: 15px !important;
margin-bottom: 20px !important;
}
.xp-metric-item {
background-color: #f7f7f7 !important;
border-radius: 6px !important;
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
transition: all 0.2s ease !important;
}
.xp-metric-item:hover {
background-color: #f0f0f0 !important;
transform: translateY(-2px) !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
.xp-metric-icon {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 10px !important;
}
.xp-metric-icon svg {
width: 20px !important;
height: 20px !important;
color: white !important;
}
.xp-metric-icon.xp-blue { background-color: #2196F3 !important; }
.xp-metric-icon.xp-green { background-color: #4CAF50 !important; }
.xp-metric-icon.xp-orange { background-color: #FF9800 !important; }
.xp-metric-icon.xp-purple { background-color: #9C27B0 !important; }
.xp-metric-icon.xp-red { background-color: #f44336 !important; }
.xp-metric-value {
font-size: 1.6rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 5px !important;
transition: color 0.3s ease !important;
}
.xp-metric-value.increased { color: #4CAF50 !important; }
.xp-metric-value.decreased { color: #f44336 !important; }
.xp-metric-label {
font-size: 0.85rem !important;
color: #666 !important;
}
/* --- NEW: Performance Trend View Section --- */
.xp-performance-trend-view {
background-color: #f9f9f9 !important;
border-radius: 8px !important;
padding: 20px !important;
margin: 15px 0 25px 0 !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
.xp-trend-controls {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 20px !important;
flex-wrap: wrap !important; /* Allow wrapping */
gap: 10px !important;
}
.xp-trend-date-range {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.xp-trend-date-range label {
font-size: 0.85rem !important;
color: #555 !important;
}
.xp-trend-date-range input[type="date"] {
padding: 5px 8px !important;
border: 1px solid #ddd !important;
border-radius: 4px !important;
font-size: 0.85rem !important;
}
.xp-trend-view-buttons button {
padding: 6px 12px !important;
border-radius: 4px !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
border: 1px solid #3a0a62 !important;
background-color: transparent !important;
color: #3a0a62 !important;
margin-left: 5px !important;
}
.xp-trend-view-buttons button:hover {
background-color: rgba(58, 10, 98, 0.1) !important;
}
.xp-trend-view-buttons button#xp-trend-view-history {
background-color: #3a0a62 !important;
color: white !important;
}
.xp-trend-view-buttons button#xp-trend-view-history:hover {
background-color: #4b0c78 !important;
}
.xp-trend-hover-blocks {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 blocks */
gap: 10px !important;
margin-bottom: 15px !important;
}
.xp-trend-hover-block {
background-color: #e9ecef !important;
border-radius: 4px !important;
padding: 10px !important;
text-align: center !important;
}
.xp-trend-hover-value {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 3px !important;
}
.xp-trend-hover-label {
font-size: 0.75rem !important;
color: #666 !important;
}
.xp-performance-trend-container {
position: relative !important;
height: 250px !important; /* Adjusted height */
width: 100% !important;
background-color: #FFFFFF !important; /* White background for chart area */
border: 1px solid #E0E0E0 !important; /* Subtle border for chart area */
border-radius: 4px !important;
}
#xp-trend-placeholder {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
color: #999999 !important;
font-size: 15px !important; /* 14-16px range */
font-style: italic !important;
text-align: center !important;
}
#XPSecurityPerformanceTrendChart {
width: 100% !important;
height: 100% !important;
}
/* Custom Tooltip for Trend Chart */
.xp-chartjs-tooltip {
background: rgba(0, 0, 0, 0.8) !important;
border-radius: 4px !important;
color: white !important;
padding: 8px 12px !important;
font-size: 0.85rem !important;
pointer-events: none !important;
position: absolute !important;
transform: translate(-50%, -110%) !important; /* Position above point */
transition: opacity 0.15s ease-in-out !important;
white-space: nowrap !important;
z-index: 1001 !important; /* Ensure it's above chart elements */
}
.xp-chartjs-tooltip-line {
display: block !important;
margin-bottom: 4px !important;
}
.xp-chartjs-tooltip-line:last-child {
margin-bottom: 0 !important;
}
/* --- END NEW: Performance Trend View Section --- */
/* Emergency close button */
.xp-emergency-container {
margin-top: 20px !important;
text-align: center !important;
}
.xp-emergency-button {
background-color: #f44336 !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 4px !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-emergency-button:hover {
background-color: #3a0a62 !important;
}
.xp-emergency-reason {
width: 100% !important;
margin-top: 15px !important;
background-color: #000000 !important;
border: 1px solid #ffe082 !important;
padding: 15px !important;
border-radius: 4px !important;
display: none !important;
}
.xp-emergency-reason.active {
display: block !important;
}
.xp-emergency-textarea {
width: 100% !important;
min-height: 80px !important;
padding: 10px !important;
border: 1px solid #ddd !important;
border-radius: 4px !important;
margin-bottom: 10px !important;
font-size: 0.9rem !important;
font-family: inherit !important;
resize: vertical !important;
}
.xp-emergency-submit {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 4px !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
cursor: pointer !important;
}
.xp-emergency-message {
margin-top: 10px !important;
color: #e8f0fe !important;
font-weight: 500 !important;
display: none !important;
}
.xp-emergency-message.active {
display: block !important;
}
/* Quiz styling - updated to be more compact */
.xp-quiz-container {
margin-top: 20px !important;
border-top: 1px solid #eee !important;
padding-top: 20px !important;
}
.xp-quiz-title {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 5px !important;
display: flex !important;
align-items: center !important;
background-color: #3a0a62 !important;
color: white !important;
padding: 10px 15px !important;
border-radius: 4px !important;
}
.xp-quiz-title svg {
margin-right: 8px !important;
color: white !important;
}
.xp-quiz-description {
font-size: 0.9rem !important;
color: #666 !important;
margin: 15px 0 !important;
line-height: 1.4 !important;
}
.xp-quiz-progress {
height: 8px !important;
background-color: #f1f1f1 !important;
border-radius: 4px !important;
margin-bottom: 20px !important;
overflow: hidden !important;
}
.xp-quiz-progress-bar {
height: 100% !important;
background: linear-gradient(90deg, #3a0a62 0%, #5a1a82 100%) !important;
width: var(--progress, 20%) !important;
transition: width 0.3s ease !important;
}
.xp-quiz-question {
margin-bottom: 20px !important;
}
.xp-quiz-question-header {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 15px !important;
}
.xp-quiz-question-text {
font-size: 1rem !important;
font-weight: 500 !important;
color: #333 !important;
padding: 10px !important;
background-color: #f5f5f5 !important;
border-left: 3px solid #3a0a62 !important;
flex: 1 !important;
margin-bottom: 0 !important;
}
.xp-quiz-explain-btn {
background: linear-gradient(135deg, #3a0a62 0%, #5a1a8a 100%) !important;
border: none !important;
border-radius: 50% !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: white !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 8px rgba(58, 10, 98, 0.3) !important;
}
.xp-quiz-explain-btn:hover {
transform: scale(1.1) !important;
box-shadow: 0 4px 12px rgba(58, 10, 98, 0.4) !important;
}
.xp-quiz-explain-popup {
display: none;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
border-radius: 12px !important;
padding: 0 !important;
margin-bottom: 15px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
border: 1px solid rgba(138, 43, 226, 0.3) !important;
overflow: hidden !important;
}
.xp-quiz-explain-popup.active {
display: block !important;
animation: slideDown 0.3s ease !important;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.xp-quiz-explain-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 12px 15px !important;
background: rgba(138, 43, 226, 0.2) !important;
border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
}
.xp-quiz-explain-title {
font-weight: 600 !important;
color: #e0e0ff !important;
font-size: 0.9rem !important;
}
.xp-quiz-explain-close {
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
color: #fff !important;
font-size: 1.5rem !important;
cursor: pointer !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
transition: all 0.2s ease !important;
}
.xp-quiz-explain-close:hover {
background: rgba(255, 100, 100, 0.3) !important;
}
.xp-quiz-explain-content {
padding: 15px !important;
color: #e0e0e0 !important;
font-size: 0.9rem !important;
line-height: 1.6 !important;
}
.xp-quiz-explain-content .scene-header {
color: #a78bfa !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.xp-quiz-explain-content .scene-description {
margin-bottom: 12px !important;
}
.xp-quiz-explain-content .scene-tip {
background: rgba(138, 43, 226, 0.15) !important;
padding: 10px 12px !important;
border-radius: 8px !important;
border-left: 3px solid #a78bfa !important;
font-style: italic !important;
}
.xp-quiz-options {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.xp-quiz-option {
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
}
.xp-quiz-option:hover:not(.xp-option-correct):not(.xp-option-incorrect) {
background-color: #f5f5f5 !important;
border-color: #ccc !important;
}
.xp-quiz-option.xp-option-selected {
background-color: #e8f0fe !important;
border-color: #4285f4 !important;
}
.xp-quiz-option.xp-option-correct {
background-color: #e8f5e9 !important;
border-color: #4CAF50 !important;
}
.xp-quiz-option.xp-option-incorrect {
background-color: #ffebee !important;
border-color: #f44336 !important;
}
.xp-option-marker {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
border: 2px solid #ddd !important;
margin-right: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
color: #666 !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
.xp-quiz-option.xp-option-selected .xp-option-marker {
border-color: #4285f4 !important;
background-color: #4285f4 !important;
color: white !important;
}
.xp-quiz-option.xp-option-correct .xp-option-marker {
border-color: #4CAF50 !important;
background-color: #4CAF50 !important;
color: white !important;
}
.xp-quiz-option.xp-option-incorrect .xp-option-marker {
border-color: #f44336 !important;
background-color: #f44336 !important;
color: white !important;
}
.xp-option-text {
font-size: 0.95rem !important;
color: #333 !important;
}
.xp-quiz-feedback {
margin: 15px 0 !important;
padding: 12px 15px !important;
border-radius: 6px !important;
font-size: 0.9rem !important;
display: none !important;
}
.xp-quiz-feedback.xp-feedback-correct {
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
display: block !important;
}
.xp-quiz-feedback.xp-feedback-incorrect {
background-color: #ffebee !important;
color: #c62828 !important;
display: block !important;
}
.xp-quiz-actions {
display: flex !important;
justify-content: space-between !important;
margin-top: 20px !important;
}
.xp-quiz-button {
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-quiz-next {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
}
.xp-quiz-next:hover {
background-color: #4b0c78 !important;
}
.xp-quiz-next:disabled {
background-color: #cccccc !important;
cursor: not-allowed !important;
}
.xp-quiz-skip {
background-color: transparent !important;
color: #666 !important;
border: none !important;
}
.xp-quiz-skip:hover {
color: #333 !important;
text-decoration: underline !important;
}
/* Quiz Results */
.xp-quiz-results {
text-align: center !important;
padding: 20px 0 !important;
display: none !important;
}
.xp-quiz-results.active {
display: block !important;
}
.xp-quiz-results-title {
font-size: 1.3rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
}
.xp-quiz-results-score {
font-size: 3rem !important;
font-weight: 700 !important;
color: #3a0a62 !important;
margin: 20px 0 !important;
}
.xp-quiz-results-message {
font-size: 1rem !important;
color: #555 !important;
margin-bottom: 20px !important;
}
.xp-quiz-restart {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin-top: 20px !important;
}
.xp-quiz-restart:hover {
background-color: #4b0c78 !important;
}
/* End Chat Confirmation Modal */
.xp-end-chat-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-end-chat-modal.active {
display: flex !important;
}
.xp-end-chat-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
margin: 0 auto !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-end-chat-header {
background-color: #e53935 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.xp-end-chat-header svg {
margin-right: 10px !important;
color: white !important;
}
.xp-end-chat-body {
padding: 20px !important;
text-align: center !important;
}
.xp-end-chat-message {
font-size: 1rem !important;
color: #333 !important;
margin-bottom: 20px !important;
line-height: 1.5 !important;
}
.xp-end-chat-actions {
display: flex !important;
justify-content: center !important;
gap: 15px !important;
}
.xp-end-chat-btn { /* This class name seems generic, check if it's used by other buttons */
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-end-chat-confirm {
background-color: #e53935 !important;
color: white !important;
border: none !important;
}
.xp-end-chat-confirm:hover {
background-color: #c62828 !important;
}
.xp-end-chat-cancel {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
}
.xp-end-chat-cancel:hover {
background-color: #e0e0e0 !important;
}
/* Resolution Selection Modal */
.xp-resolution-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-resolution-modal.active {
display: flex !important;
}
.xp-resolution-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 450px !important;
margin: 0 auto !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-resolution-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-resolution-header svg {
margin-right: 10px !important;
}
.xp-resolution-body {
padding: 20px !important;
}
.xp-resolution-message {
font-size: 1rem !important;
color: #333 !important;
margin-bottom: 20px !important;
text-align: center !important;
}
.xp-resolution-options {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
.xp-resolution-option {
padding: 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
}
.xp-resolution-option:hover {
border-color: #3a0a62 !important;
background-color: #f9f5ff !important;
}
.xp-resolution-option.selected {
border-color: #3a0a62 !important;
background-color: #f9f5ff !important;
}
.xp-resolution-icon {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 12px !important;
color: white !important;
flex-shrink: 0 !important;
}
.xp-resolution-icon.resolved {
background-color: #4CAF50 !important;
}
.xp-resolution-icon.escalated {
background-color: #FF9800 !important;
}
.xp-resolution-icon.ticket {
background-color: #2196F3 !important;
}
.xp-resolution-text {
font-size: 1rem !important;
color: #333 !important;
font-weight: 500 !important;
}
.xp-resolution-actions {
display: flex !important;
justify-content: center !important;
}
.xp-resolution-submit {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 4px !important;
font-size: 1rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-resolution-submit:hover {
background-color: #4b0c78 !important;
}
/* New Password Modal */
.xp-new-password-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 2000 !important;
}
.xp-new-password-modal.active {
display: flex !important;
}
.xp-new-password-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-new-password-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-radius: 8px 8px 0 0 !important;
}
.xp-new-password-header svg {
margin-right: 10px !important;
}
.xp-new-password-body {
padding: 20px !important;
}
.xp-new-password-message {
margin-bottom: 20px !important;
color: #555 !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
.xp-new-password-success {
background-color: #e8f5e9 !important;
border-left: 3px solid #4caf50 !important;
padding: 10px 15px !important;
color: #2e7d32 !important;
margin: 15px 0 !important;
display: none !important;
}
.xp-new-password-success.active {
display: block !important;
}
.xp-new-password-error {
background-color: #ffebee !important;
border-left: 3px solid #f44336 !important;
padding: 10px 15px !important;
color: #c62828 !important;
margin: 15px 0 !important;
display: none !important;
}
.xp-new-password-error.active {
display: block !important;
}
.xp-new-password-actions {
display: flex !important;
gap: 10px !important;
margin-top: 20px !important;
}
.xp-new-password-button {
flex: 1 !important;
padding: 10px 15px !important;
font-weight: 500 !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-align: center !important;
}
.xp-new-password-primary {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
}
.xp-new-password-primary:hover {
background-color: #4b0c78 !important;
}
/* Password and ID Recovery Success Modals */
.xp-reset-success-modal, .xp-retrieve-success-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 2000 !important;
}
.xp-reset-success-modal.active, .xp-retrieve-success-modal.active {
display: flex !important;
}
.xp-reset-success-container, .xp-retrieve-success-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-reset-success-header, .xp-retrieve-success-header {
background-color: #4CAF50 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.xp-reset-success-body, .xp-retrieve-success-body {
padding: 20px !important;
text-align: center !important;
}
.xp-reset-success-icon, .xp-retrieve-success-icon {
width: 60px !important;
height: 60px !important;
background-color: #4CAF50 !important;
color: white !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 15px auto !important;
font-size: 25px !important;
}
.xp-reset-success-title, .xp-retrieve-success-title {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
}
.xp-reset-success-message, .xp-retrieve-success-message {
font-size: 0.95rem !important;
color: #666 !important;
margin-bottom: 20px !important;
line-height: 1.4 !important;
}
.xp-reset-success-btn, .xp-retrieve-success-btn {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-reset-success-btn:hover, .xp-retrieve-success-btn:hover {
background-color: #4b0c78 !important;
}
.xp-retrieve-id-display {
background-color: #f5f5f5 !important;
padding: 15px !important;
border-radius: 6px !important;
font-family: monospace !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
color: #333 !important;
letter-spacing: 1px !important;
margin: 15px 0 !important;
border: 1px dashed #aaa !important;
text-align: center !important;
}
/* Loading Spinner */
.xp-loading-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(255, 255, 255, 0.9) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
z-index: 9999 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-loading-overlay.active {
display: flex !important;
}
.xp-loading-spinner {
width: 70px !important;
height: 70px !important;
position: relative !important;
margin-bottom: 20px !important;
}
.xp-loading-spinner .xp-spinner {
position: absolute !important;
width: 100% !important;
height: 100% !important;
border: 4px solid transparent !important;
border-top-color: #3a0a62 !important;
border-radius: 50% !important;
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}
.xp-loading-spinner .xp-spinner:nth-child(1) {
animation-delay: -0.45s !important;
}
.xp-loading-spinner .xp-spinner:nth-child(2) {
animation-delay: -0.3s !important;
}
.xp-loading-spinner .xp-spinner:nth-child(3) {
animation-delay: -0.15s !important;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.xp-loading-text {
font-size: 1.1rem !important;
color: #3a0a62 !important;
font-weight: 500 !important;
text-align: center !important;
}
/* Chat End Report Modal - UPDATED WITH PROPER BAR CHART */
.xp-report-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
animation: fadeIn 0.3s ease-out !important;
}
.xp-report-modal.active {
display: flex !important;
}
.xp-report-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 550px !important;
max-height: 90vh !important;
overflow-y: auto !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-report-header {
background: linear-gradient(135deg, #3a0a62 0%, #5a1a82 100%) !important;
color: white !important;
padding: 20px !important;
font-weight: 600 !important;
font-size: 1.2rem !important;
text-align: center !important;
border-radius: 8px 8px 0 0 !important;
}
.xp-report-body {
padding: 20px !important;
}
.xp-report-congrats {
text-align: center !important;
margin-bottom: 25px !important;
}
.xp-report-icon {
width: 80px !important;
height: 80px !important;
background-color: #4CAF50 !important;
color: white !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 15px auto !important;
}
.xp-report-icon svg {
width: 40px !important;
height: 40px !important;
}
.xp-report-title {
font-size: 1.3rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
}
.xp-report-subtitle {
color: #666 !important;
font-size: 0.95rem !important;
}
/* Report Stats Grid - UPDATED */
.xp-report-stats {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
margin: 20px 0 !important;
}
.xp-report-stat {
background-color: #f7f7f7 !important;
border-radius: 6px !important;
padding: 15px !important;
text-align: center !important;
}
.xp-report-stat-value {
font-size: 1.8rem !important;
font-weight: 700 !important;
color: #3a0a62 !important;
margin-bottom: 5px !important;
}
.xp-report-stat-label {
font-size: 0.85rem !important;
color: #666 !important;
}
/* Resolution Status Block */
.xp-resolution-status {
background-color: #f5f5f5 !important;
border-radius: 6px !important;
padding: 15px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.xp-resolution-status-icon {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 12px !important;
color: white !important;
flex-shrink: 0 !important;
}
.xp-resolution-status-icon.resolved {
background-color: #4CAF50 !important;
}
.xp-resolution-status-icon.escalated {
background-color: #FF9800 !important;
}
.xp-resolution-status-icon.ticket {
background-color: #2196F3 !important;
}
.xp-resolution-status-text {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: #333 !important;
}
/* PROPER VERTICAL BAR CHART STYLES - NEW */
.xp-barchart-container {
margin: 25px 0 !important;
background-color: #f9f9f9 !important;
border-radius: 8px !important;
padding: 20px !important;
position: relative !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
height: 350px !important; /* Fixed height for better proportions */
}
.xp-barchart-title {
font-size: 1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 15px !important;
text-align: center !important;
}
/* Main chart area with axes */
.xp-barchart {
position: relative !important;
height: 280px !important; /* Fixed height for the chart area */
display: flex !important;
align-items: flex-end !important;
justify-content: space-around !important;
margin-left: 40px !important; /* Space for Y-axis */
margin-bottom: 30px !important; /* Space for X-axis */
}
/* X and Y Axes */
.xp-barchart-x-axis {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: #333 !important;
}
.xp-barchart-y-axis {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 2px !important;
background-color: #333 !important;
}
/* Y-axis ticks and labels */
.xp-barchart-y-ticks {
position: absolute !important;
left: -40px !important;
top: 0 !important;
bottom: 0 !important;
width: 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 10px 0 !important;
}
.xp-barchart-y-tick {
position: relative !important;
width: 100% !important;
text-align: right !important;
padding-right: 10px !important;
font-size: 10px !important;
color: #666 !important;
}
.xp-barchart-y-tick::after {
content: "" !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
width: 4px !important;
height: 1px !important;
background-color: #333 !important;
}
/* X-axis labels */
.xp-barchart-x-labels {
position: absolute !important;
bottom: -30px !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
justify-content: space-around !important;
}
.xp-barchart-x-label {
font-size: 10px !important;
color: #666 !important;
text-align: center !important;
max-width: 70px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Horizontal grid lines */
.xp-barchart-grid {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 10px 0 !important;
pointer-events: none !important;
}
.xp-barchart-grid-line {
width: 100% !important;
height: 1px !important;
background-color: rgba(0, 0, 0, 0.1) !important;
}
/* Individual bar column */
.xp-barchart-column {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
width: 60px !important;
height: 100% !important;
position: relative !important;
}
/* The actual bar */
.xp-barchart-bar {
width: 40px !important;
background-color: #2196F3 !important; /* Default blue */
border-radius: 4px 4px 0 0 !important;
transition: height 0.8s ease, background-color 0.5s ease !important;
position: relative !important;
}
/* Performance color classes */
.xp-barchart-bar.excellent {
background-color: #4CAF50 !important; /* Green for excellent */
}
.xp-barchart-bar.good {
background-color: #2196F3 !important; /* Blue for good */
}
.xp-barchart-bar.fair {
background-color: #FF9800 !important; /* Yellow/orange for fair */
}
.xp-barchart-bar.poor {
background-color: #f44336 !important; /* Red for poor */
}
/* Value label on top of bar */
.xp-barchart-value {
position: absolute !important;
top: -25px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 12px !important;
font-weight: bold !important;
color: #333 !important;
white-space: nowrap !important;
}
/* Performance Comparison Section */
.xp-performance-comparison {
margin-top: 20px !important;
padding: 15px !important;
border-radius: 6px !important;
text-align: center !important;
position: relative !important;
border: 1px solid #e0e0e0 !important;
}
.xp-performance-comparison.improved {
border-color: #4CAF50 !important;
background-color: rgba(76, 175, 80, 0.05) !important;
}
.xp-performance-comparison.declined {
border-color: #f44336 !important;
background-color: rgba(244, 67, 54, 0.05) !important;
}
.xp-performance-comparison.neutral {
border-color: #2196F3 !important;
background-color: rgba(33, 150, 243, 0.05) !important;
}
.xp-comparison-title {
font-size: 1rem !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 10px !important;
}
.xp-comparison-value {
font-size: 1.3rem !important;
font-weight: 700 !important;
margin-bottom: 5px !important;
}
.xp-comparison-value.improved {
color: #4CAF50 !important;
}
.xp-comparison-value.declined {
color: #f44336 !important;
}
.xp-comparison-value.neutral {
color: #2196F3 !important;
}
.xp-comparison-details {
font-size: 0.9rem !important;
color: #666 !important;
}
/* AI usage stats in report */
.xp-ai-usage-section {
background-color: #f9f5ff !important;
border-radius: 6px !important;
padding: 15px !important;
margin-bottom: 20px !important;
}
.xp-ai-usage-title {
font-size: 1rem !important;
font-weight: 600 !important;
color: #3a0a62 !important;
margin-bottom: 15px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-ai-usage-title svg {
margin-right: 8px !important;
}
.xp-ai-usage-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.xp-ai-usage-stat {
background-color: white !important;
border-radius: 6px !important;
padding: 12px !important;
text-align: center !important;
}
.xp-ai-usage-value {
font-size: 1.4rem !important;
font-weight: 700 !important;
color: #3a0a62 !important;
margin-bottom: 5px !important;
}
.xp-ai-usage-label {
font-size: 0.75rem !important;
color: #666 !important;
}
.xp-report-actions {
text-align: center !important;
margin-top: 20px !important;
position: relative !important;
}
.xp-report-timer {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 0.8rem !important;
color: #999 !important;
}
.xp-report-close {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.xp-report-close:hover {
background-color: #4b0c78 !important;
}
.xp-report-close:disabled {
background-color: #cccccc !important;
cursor: not-allowed !important;
}
/* Customer Rating Stars */
.xp-customer-rating {
text-align: center !important;
margin: 15px 0 !important;
}
.xp-stars-container {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.xp-star {
color: #FFC107 !important;
font-size: 1.5rem !important;
}
/* --- NEW STYLES --- */
/* Customer Ended Chat Modal */
.xp-customer-ended-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1050 !important; /* Higher than other modals */
animation: fadeIn 0.3s ease-out !important;
}
.xp-customer-ended-modal.active {
display: flex !important;
}
.xp-customer-ended-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; /* Completed this line */
width: 100% !important;
max-width: 400px !important;
margin: 0 auto !important;
overflow: hidden !important;
animation: slideInUp 0.3s ease-out !important;
text-align: center !important;
}
.xp-customer-ended-header {
background-color: #ff9800 !important; /* Orange for notification */
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-customer-ended-header svg {
margin-right: 10px !important;
}
.xp-customer-ended-body {
padding: 25px 20px !important;
}
.xp-customer-ended-message {
font-size: 1.1rem !important;
color: #333 !important;
margin-bottom: 25px !important;
line-height: 1.5 !important;
}
.xp-customer-ended-actions {
display: flex !important;
justify-content: center !important;
gap: 15px !important;
}
.xp-customer-ended-btn {
padding: 10px 20px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
border: none !important;
}
.xp-follow-up-btn {
background-color: #3a0a62 !important;
color: white !important;
}
.xp-follow-up-btn:hover {
background-color: #4b0c78 !important;
}
.xp-end-chat-direct-btn {
background-color: #f5f5f5 !important;
color: #333 !important;
border: 1px solid #ddd !important;
}
.xp-end-chat-direct-btn:hover {
background-color: #e0e0e0 !important;
}
/* Email Composer Modal */
.xp-email-composer-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.6) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1060 !important;
animation: fadeIn 0.4s ease-out !important;
}
.xp-email-composer-modal.active {
display: flex !important;
}
.xp-email-composer-container {
background-color: white !important;
border-radius: 10px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
width: 100% !important;
max-width: 700px !important;
height: 80vh !important;
max-height: 650px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
animation: slideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
font-family: Arial, sans-serif !important; /* Enforce Arial */
}
.xp-email-composer-header {
background-color: #f5f5f5 !important;
padding: 12px 15px !important;
border-bottom: 1px solid #e0e0e0 !important;
font-weight: 600 !important;
font-size: 1rem !important;
color: #333 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-family: Arial, sans-serif !important;
}
.xp-email-composer-close {
background: none !important;
border: none !important;
font-size: 1.5rem !important;
color: #888 !important;
cursor: pointer !important;
line-height: 1 !important;
}
.xp-email-composer-close:hover {
color: #333 !important;
}
.xp-email-composer-fields {
padding: 10px 15px !important;
border-bottom: 1px solid #e0e0e0 !important;
font-family: Arial, sans-serif !important;
}
.xp-email-field {
display: flex !important;
align-items: center !important;
padding: 5px 0 !important;
font-size: 0.9rem !important;
color: #666 !important;
font-family: Arial, sans-serif !important;
}
.xp-email-field label {
width: 50px !important;
flex-shrink: 0 !important;
font-family: Arial, sans-serif !important;
}
.xp-email-field span, .xp-email-field input {
flex-grow: 1 !important;
color: #333 !important;
font-family: Arial, sans-serif !important;
border: none !important;
outline: none !important;
padding: 2px 0 !important;
}
.xp-email-field input {
border-bottom: 1px solid transparent !important;
transition: border-color 0.2s ease !important;
}
.xp-email-field input:focus {
border-bottom-color: #3a0a62 !important;
}
.xp-email-composer-body {
flex-grow: 1 !important;
padding: 15px !important;
overflow-y: auto !important;
font-family: Arial, sans-serif !important;
}
.xp-email-composer-body .xp-email-heading { /* Added heading style */
font-size: 0.9rem !important;
color: #555 !important;
background-color: #f0f0f0 !important;
padding: 8px 12px !important;
border-radius: 4px !important;
margin-bottom: 15px !important;
font-family: Arial, sans-serif !important;
}
.xp-email-textarea {
width: 100% !important;
height: calc(100% - 40px) !important; /* Adjust height */
border: none !important;
outline: none !important;
resize: none !important;
font-size: 1rem !important;
line-height: 1.6 !important;
font-family: Arial, sans-serif !important;
color: #333 !important;
}
.xp-email-composer-footer {
padding: 15px !important;
border-top: 1px solid #e0e0e0 !important;
background-color: #f5f5f5 !important;
display: flex !important;
justify-content: flex-end !important;
font-family: Arial, sans-serif !important;
}
.xp-email-send-btn {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 10px 25px !important;
border-radius: 4px !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
font-family: Arial, sans-serif !important;
}
.xp-email-send-btn:hover {
background-color: #4b0c78 !important;
}
/* Email Sending Animation Modal */
.xp-email-sending-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(58, 10, 98, 0.85) !important; /* Darker overlay */
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1070 !important;
animation: fadeIn 0.5s ease-out !important;
overflow: hidden !important; /* Prevent scrollbars */
}
.xp-email-sending-modal.active {
display: flex !important;
}
.xp-email-sending-container {
background-color: transparent !important; /* Transparent container */
width: 100% !important;
max-width: 450px !important;
text-align: center !important;
position: relative !important;
height: 300px !important; /* Fixed height for animation */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.xp-email-animation-stage {
position: absolute !important;
top: 0; left: 0; right: 0; bottom: 0;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: opacity 0.6s ease-in-out !important;
transform-origin: top center !important;
}
.xp-email-animation-stage.active {
opacity: 1 !important;
z-index: 1 !important; /* Ensure active stage is on top */
}
/* Page flip animation */
.xp-email-animation-stage.page-flip-enter {
animation: pageFlipEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.xp-email-animation-stage.page-flip-exit {
animation: pageFlipExit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
@keyframes pageFlipEnter {
from { transform: perspective(1000px) rotateX(-90deg); opacity: 0; }
to { transform: perspective(1000px) rotateX(0deg); opacity: 1; }
}
@keyframes pageFlipExit {
from { transform: perspective(1000px) rotateX(0deg); opacity: 1; }
to { transform: perspective(1000px) rotateX(90deg); opacity: 0; }
}
.xp-email-animation-text {
font-size: 1.2rem !important;
color: white !important;
font-weight: 500 !important;
margin-top: 170px !important; /* Position text below animation */
text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.xp-email-animation-visual {
width: 150px !important;
height: 150px !important;
position: absolute !important;
top: 30px !important; /* Position visual above text */
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Envelope Styles */
.xp-envelope {
width: 120px !important;
height: 80px !important;
background-color: #f0f0f0 !important;
border: 1px solid #ccc !important;
position: relative !important;
border-radius: 4px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
transform-style: preserve-3d !important;
transition: transform 0.5s ease !important;
}
.xp-envelope-flap {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 50% !important;
background-color: #e0e0e0 !important;
border-bottom: 1px solid #ccc !important;
border-radius: 4px 4px 0 0 !important;
transform-origin: top center !important;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; /* Realistic flap */
z-index: 2 !important;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.xp-envelope.open .xp-envelope-flap {
transform: perspective(500px) rotateX(-150deg) !important;
}
.xp-envelope-body {
position: absolute !important;
top: 0 !important; left: 0; right: 0; bottom: 0;
background-color: #f0f0f0 !important;
border-radius: 4px !important;
z-index: 1 !important;
}
/* --- NEW: Stage 2 Animation Elements --- */
.xp-envelope-stage2 { /* Specific envelope for stage 2 */
/* Inherits base .xp-envelope styles */
}
.xp-envelope-stage2 .xp-envelope-flap {
/* Flap starts open */
transform: perspective(500px) rotateX(-150deg) !important;
transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1) 5.5s !important; /* Close animation: 2s duration, starts after 5.5s (paper entry + 0.5s pause) */
}
.xp-envelope-stage2.flap-closing .xp-envelope-flap {
transform: perspective(500px) rotateX(0deg) !important; /* Closed position */
}
.paper-stage2 {
width: 110px !important; /* Square paper */
height: 110px !important;
background-color: white !important;
position: absolute !important;
top: -150px !important; /* Start above the screen */
left: 50% !important;
transform: translateX(-50%) !important;
border-radius: 0 !important; /* No border radius */
box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important; /* Slight shadow */
z-index: 1 !important; /* Behind flap initially */
opacity: 0 !important;
font-family: 'Courier New', Courier, monospace !important; /* Typewriter/monospace font */
font-size: 10px !important; /* Small font for paper content */
padding: 8px !important;
overflow: hidden !important; /* Hide overflow */
color: #333 !important;
text-align: center !important;
line-height: 1.4 !important;
animation: dropInSlow 5s linear 0.6s forwards !important; /* 5s duration, starts after 0.6s page flip */
}
@keyframes dropInSlow {
0% { top: -150px; opacity: 0; }
20% { opacity: 1; } /* Fade in quickly */
100% { top: 10px; opacity: 1; z-index: 1; } /* End position inside envelope */
}
.pencil-stage2 {
width: 20px !important; /* Smaller pencil */
height: 20px !important;
position: absolute !important;
bottom: 15px !important;
right: 15px !important;
opacity: 0 !important;
z-index: 3 !important; /* Above envelope body and closed flap */
/* Use an actual pencil image/svg */
content: url('data:image/svg+xml;utf8,');
animation: pencilAppear 0.5s ease-out 7.5s forwards, pencilWrite 7s linear 8s forwards !important; /* Appear after flap close + 0.5s, then write for 7s */
}
@keyframes pencilAppear {
from { opacity: 0; transform: translate(10px, -10px); }
to { opacity: 1; transform: translate(0, 0); }
}
@keyframes pencilWrite {
0% { transform: translate(0, 0) rotate(0deg); }
10%, 30%, 50%, 70%, 90% { transform: translate(-1px, 1px) rotate(-5deg); }
20%, 40%, 60%, 80%, 100% { transform: translate(0, 0) rotate(0deg); }
}
#writtenAddressTo, #writtenAddressName {
position: absolute !important;
bottom: 10px !important;
right: 40px !important; /* Position left of pencil */
font-family: 'Pacifico', cursive !important; /* Cursive font */
font-size: 18px !important; /* Adjusted size */
color: #000000 !important; /* Black color */
font-weight: bold !important; /* Bold text */
opacity: 0 !important;
z-index: 3 !important;
white-space: pre !important;
text-align: right !important;
width: 100px !important; /* Give some width */
}
#writtenAddressTo {
bottom: 30px !important; /* Position first line higher */
animation: revealText 3.5s steps(30, end) 8s forwards !important; /* Reveal over 3.5s, start after pencil appears */
}
#writtenAddressName {
bottom: 10px !important; /* Position second line lower */
animation: revealText 3.5s steps(30, end) 11.5s forwards !important; /* Reveal over 3.5s, start after first line */
}
@keyframes revealText {
0% { width: 0; opacity: 1; } /* Start invisible with 0 width */
100% { width: 100px; opacity: 1; } /* Reveal to full width */
}
/* --- End NEW: Stage 2 Animation Elements --- */
.xp-envelope-paper { /* Original paper for stage 1 */
width: 110px !important;
height: 70px !important;
background-color: white !important;
position: absolute !important;
top: 5px !important;
left: 5px !important;
border-radius: 2px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
z-index: 0 !important;
opacity: 0 !important;
transform: translateY(50px) !important;
transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
font-size: 4px !important; /* Tiny text on paper */
padding: 3px !important;
overflow: hidden !important;
font-family: Arial, sans-serif !important;
color: #555 !important;
white-space: pre-wrap !important; /* Preserve line breaks */
word-break: break-all !important; /* Break long words */
}
.xp-envelope.paper-in .xp-envelope-paper {
opacity: 1 !important;
transform: translateY(0) !important;
}
.xp-envelope-pencil { /* Original pencil for stage 1 */
width: 30px !important;
height: 8px !important;
background-color: #8B4513 !important; /* Brown pencil */
position: absolute !important;
bottom: 10px !important;
right: 10px !important;
border-radius: 2px !important;
transform: rotate(-30deg) !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
z-index: 3 !important;
}
.xp-envelope-pencil::before { /* Pencil tip */
content: '' !important;
position: absolute !important;
left: -3px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 0 !important;
height: 0 !important;
border-top: 4px solid transparent !important;
border-bottom: 4px solid transparent !important;
border-right: 5px solid #333 !important; /* Black tip */
}
.xp-envelope.writing .xp-envelope-pencil {
opacity: 1 !important;
animation: writeAnimation 5s ease-in-out forwards !important; /* Extended duration */
}
.xp-envelope-address { /* Original address for stage 1 */
position: absolute !important;
bottom: 5px !important;
right: 5px !important;
font-size: 6px !important;
color: #333 !important;
font-family: 'Courier New', monospace !important;
opacity: 0 !important;
transition: opacity 0.5s ease 5s !important; /* Delay appearance longer */
z-index: 3 !important;
white-space: pre !important; /* Preserve spaces/newlines */
text-align: right !important;
}
.xp-envelope.writing .xp-envelope-address {
opacity: 1 !important;
}
/* Animations */
@keyframes envelopeZoomInOut {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes writeAnimation { /* Simulate writing motion */
0% { transform: rotate(-30deg) translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: rotate(-30deg) translateX(-2px) translateY(1px); }
20%, 40%, 60%, 80% { transform: rotate(-30deg) translateX(0); }
100% { transform: rotate(-30deg) translateX(0); opacity: 0; }
}
@keyframes envelopeZoomOff {
0% { transform: translateX(-50%) scale(1); opacity: 1; } /* Start centered */
100% { transform: translateX(100vw) scale(0.5); opacity: 0; } /* Move far right */
}
.xp-envelope.zoom-off {
animation: envelopeZoomOff 0.8s cubic-bezier(0.6, -0.28, 0.74, 0.05) forwards !important;
}
/* Speed lines */
.xp-speed-lines {
position: absolute !important;
left: 50% !important; /* Start near center */
top: 50% !important;
width: 50px !important;
height: 2px !important;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.6)) !important;
transform: translate(-100%, -50%) !important; /* Position left of envelope */
opacity: 0 !important;
transition: opacity 0.2s ease !important;
z-index: -1 !important; /* Behind envelope */
}
.xp-speed-lines::before, .xp-speed-lines::after {
content: '' !important;
position: absolute !important;
width: 40px !important;
height: 1px !important;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.4)) !important;
}
.xp-speed-lines::before { top: -5px !important; left: 5px !important; }
.xp-speed-lines::after { bottom: -5px !important; left: 10px !important; }
.xp-envelope.zoom-off + .xp-speed-lines {
opacity: 1 !important;
animation: speedLinesFade 0.8s ease-out forwards !important;
}
@keyframes speedLinesFade {
0% { opacity: 1; transform: translateX(-100%) translateY(-50%); } /* Start left */
100% { opacity: 0; transform: translateX(0) translateY(-50%); } /* Fade out at center */
}
/* Final Confirmation */
.xp-email-confirmation {
color: #4CAF50 !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-email-confirmation svg {
margin-right: 10px !important;
}
/* --- NEW: Email Verification Modal --- */
.xp-email-verify-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 2010 !important; /* High z-index */
animation: fadeIn 0.3s ease-out !important;
}
.xp-email-verify-modal.active {
display: flex !important;
}
.xp-email-verify-container {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 400px !important;
animation: slideInUp 0.3s ease-out !important;
overflow: hidden !important;
}
.xp-email-verify-header {
background-color: #3a0a62 !important;
color: white !important;
padding: 15px 20px !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.xp-email-verify-header svg {
margin-right: 10px !important;
}
.xp-email-verify-close { /* Optional close button */
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.7) !important;
cursor: pointer !important;
padding: 5px !important;
font-size: 1.5rem !important;
line-height: 1 !important;
}
.xp-email-verify-close:hover {
color: white !important;
}
.xp-email-verify-body {
padding: 25px 20px !important;
}
.xp-email-verify-step {
/* display: none; */ /* Controlled by JS */
}
.xp-email-verify-step.active {
display: block !important;
}
.xp-email-verify-message {
margin-bottom: 20px !important;
color: #555 !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
text-align: center !important;
}
.xp-otp-input {
letter-spacing: 10px !important; /* Space out OTP digits */
text-align: center !important;
font-size: 1.5rem !important;
font-family: monospace !important;
padding: 10px !important;
}
.xp-verify-spinner { /* Simple spinner for OTP verification */
border: 4px solid #f3f3f3 !important;
border-top: 4px solid #3a0a62 !important;
border-radius: 50% !important;
width: 30px !important;
height: 30px !important;
animation: spin 1s linear infinite !important;
margin: 15px auto !important;
display: none !important; /* Hidden by default */
}
.xp-verify-spinner.active {
display: block !important;
}
/* --- End NEW Styles --- */
/* NEW: Real-time Response Timer Placeholder Style */
.xp-realtime-response-timer-container {
padding: 5px 15px !important;
background-color: #fff8e1 !important; /* Light yellow */
border-top: 1px solid #eee !important;
text-align: center !important;
font-size: 0.85rem !important;
color: #795548 !important; /* Brownish text */
display: none !important; /* Hidden by default */
}
.xp-realtime-response-timer-container.active {
display: block !important;
}
/* --- NEW: Agent File Message Styles --- */
.xp-file-message { /* General styling for file messages (both customer and agent) */
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.xp-file-preview-container {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
cursor: pointer !important; /* Make it look clickable */
transition: background-color 0.2s ease !important;
}
.xp-file-preview-container:hover {
background-color: #f9f9f9 !important;
}
.xp-file-thumbnail { /* Specific for agent side thumbnail */
width: 50px !important;
height: 50px !important;
border-radius: 4px !important;
overflow: hidden !important;
background-color: #f0f0f0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.xp-file-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-file-thumbnail .xp-file-icon-placeholder { /* For non-image files */
width: 30px !important;
height: 30px !important;
color: #555 !important;
}
.xp-file-details {
flex-grow: 1 !important;
overflow: hidden !important;
}
.xp-file-name {
font-size: 0.9em !important;
font-weight: 500 !important;
color: #3a0a62 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-bottom: 3px !important;
}
.xp-file-type-size {
font-size: 0.75em !important;
color: #777 !important;
}
.xp-file-actions {
display: flex !important;
gap: 8px !important;
margin-top: 8px !important;
}
.xp-file-download-btn {
background-color: #3a0a62 !important;
color: white !important;
border: none !important;
padding: 5px 10px !important;
font-size: 0.8em !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
.xp-file-download-btn:hover {
background-color: #4b0c78 !important;
}
/* --- NEW: Full Page File Preview Modal --- */
.xp-file-preview-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.85) !important;
display: none !important; /* Hidden by default */
align-items: center !important;
justify-content: center !important;
z-index: 1080 !important; /* High z-index */
animation: fadeIn 0.3s ease-out !important;
}
.xp-file-preview-modal.active {
display: flex !important;
}
.xp-file-preview-content {
background-color: white !important;
border-radius: 8px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
width: 90vw !important;
height: 90vh !important;
max-width: 1200px !important;
max-height: 800px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
position: relative !important;
animation: slideInUp 0.3s ease-out !important;
}
.xp-file-preview-header {
padding: 10px 15px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background-color: #f1f1f1 !important;
border-bottom: 1px solid #ddd !important;
}
.xp-file-preview-filename {
font-size: 1rem !important;
font-weight: 500 !important;
color: #333 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.xp-file-preview-close-btn {
background: none !important;
border: none !important;
font-size: 1.8rem !important;
font-weight: bold !important;
color: #777 !important;
cursor: pointer !important;
line-height: 1 !important;
padding: 5px !important;
}
.xp-file-preview-close-btn:hover {
color: #333 !important;
}
.xp-file-preview-body {
flex-grow: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: auto !important; /* For large content */
padding: 15px !important;
}
.xp-file-preview-body img,
.xp-file-preview-body video {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* Use contain for full visibility */
border-radius: 4px !important;
}
.xp-file-preview-body iframe { /* For PDFs/Docs */
width: 100% !important;
height: 100% !important;
border: none !important;
}
.xp-file-preview-unsupported {
text-align: center !important;
color: #555 !important;
}
.xp-file-preview-unsupported svg {
width: 60px !important;
height: 60px !important;
color: #999 !important;
margin-bottom: 15px !important;
}
/* --- End File Preview Modal Styles --- */
/* --- NEW: Agent Location Sharing Styles --- */
.xp-location-preview-agent {
background-color: #f0f8ff !important; /* Light, professional blue */
border-radius: 12px !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
border: 1px solid #d6eaff !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
.xp-agent-map-preview-container {
width: 220px !important; /* Consistent with customer but can be styled */
height: 150px !important;
border-radius: 8px !important;
overflow: hidden !important;
position: relative !important;
background-color: #e9e9e9 !important;
border: 1px solid #ccc !important;
cursor: pointer !important;
margin: 0 auto 8px auto !important; /* Center map preview */
}
.xp-agent-map-pin-container { /* For centering the pin */
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -100%) !important; /* Adjust to position pin point at center */
z-index: 5 !important;
}
.xp-apple-map-pin {
width: 22px !important; /* Small pin */
height: 32px !important;
/* SVG for Apple-like pin */
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.xp-location-details-agent {
text-align: left !important; /* Align text to left for agent */
padding: 5px !important;
background-color: rgba(255,255,255,0.5) !important;
border-radius: 6px !important;
}
.xp-location-address-text,
.xp-location-coords-text,
.xp-location-timestamp-text {
font-size: 0.85rem !important;
color: #333 !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
.xp-location-address-text strong {
color: #3a0a62 !important;
}
.xp-location-timestamp-text {
font-size: 0.75rem !important;
color: #777 !important;
margin-bottom: 0 !important;
}
#xp-agent-map-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: #fff !important; /* Opaque background */
z-index: 10000 !important; /* Very high z-index */
display: none !important; /* Hidden by default */
flex-direction: column !important;
opacity: 0 !important;
transform: translateY(100%) !important; /* Start off-screen */
transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
#xp-agent-map-overlay.active {
display: flex !important;
opacity: 1 !important;
transform: translateY(0) !important;
}
#xp-agent-map-render-area {
flex-grow: 1 !important;
width: 100% !important;
background-color: #e0e0e0 !important; /* Placeholder */
}
/* Address Panel on Map Overlay - will be a Google Maps OverlayView */
.xp-map-overlay-address-panel {
background-color: rgba(255, 255, 255, 0.9) !important;
padding: 8px 12px !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
font-size: 0.9rem !important;
color: #333 !important;
font-weight: 500 !important;
max-width: 80% !important;
text-align: center !important;
/* JS will position this */
}
.xp-map-action-controls {
position: absolute !important;
top: 15px !important;
right: 15px !important;
display: flex !important;
gap: 10px !important;
z-index: 10001 !important; /* Above map, ensure it's higher than Google's own controls if they are visible */
}
/* --- NEW: Force Mapbox controls to the left --- */
.mapboxgl-ctrl-top-right {
left: 10px !important;
right: auto !important;
}
.xp-map-control-btn {
background-color: rgba(255, 255, 255, 0.9) !important;
border: 1px solid #ccc !important;
border-radius: 50% !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
transition: background-color 0.2s ease !important;
color: #333 !important;
}
.xp-map-control-btn:hover {
background-color: #f0f0f0 !important;
}
.xp-map-control-btn svg {
width: 18px !important;
height: 18px !important;
}
#xp-map-pip-widget {
position: fixed !important;
top: 20px !important; /* Changed from bottom to top */
right: 20px !important;
width: 50px !important; /* Size of the icon */
height: 50px !important;
background-image: url('https://cdn-icons-png.flaticon.com/512/9743/9743895.png') !important;
background-size: cover !important;
background-position: center !important;
border-radius: 50% !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
z-index: 9999 !important; /* Below overlay but above chat */
display: none !important; /* Hidden by default */
transition: transform 0.2s ease-out !important;
}
#xp-map-pip-widget:hover {
transform: scale(1.1) !important;
}
#xp-map-pip-widget.active {
display: block !important;
}
/* --- End Agent Location Sharing Styles --- */
/* Responsive adjustments */
@media (max-width: 768px) {
.xp-header h2 {
font-size: 1.2rem !important;
}
.xp-message-wrapper {
max-width: 85% !important;
}
.xp-chat-input input {
padding: 10px 12px !important;
font-size: 0.9rem !important;
}
.xp-chat-input button {
width: 40px !important;
height: 40px !important;
}
.xp-auth-container {
max-width: 90% !important;
margin-top: 50px !important;
padding: 20px !important;
}
.xp-agent-info {
max-width: 120px !important;
}
.xp-agent-name-id {
display: none !important;
}
.xp-sidebar-expanded {
width: 180px !important;
}
.xp-request-container,
.xp-info-container,
.xp-modal-container,
.xp-recovery-container,
.xp-security-container,
.xp-performance-container,
.xp-report-container,
.xp-end-chat-container,
.xp-resolution-container, /* Added */
.xp-customer-ended-container, /* Added */
.xp-email-composer-container, /* Added */
.xp-email-verify-container, /* Added */
.xp-file-preview-content { /* Added */
width: 90% !important;
height: auto !important; /* Allow auto height for preview modal on small screens */
max-height: 90vh !important;
}
.xp-performance-body {
flex-direction: column !important;
}
.xp-performance-container {
max-width: 95% !important;
}
.xp-performance-sidebar {
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid #eee !important;
padding-top: 20px !important;
margin-top: 20px !important;
}
.xp-metrics,
.xp-report-stats,
.xp-ai-usage-stats {
grid-template-columns: 1fr !important;
}
/* Responsive bar chart */
.xp-barchart {
margin-left: 30px !important;
}
.xp-barchart-y-ticks {
left: -30px !important;
width: 30px !important;
}
.xp-barchart-column {
width: 50px !important;
}
.xp-barchart-bar {
width: 30px !important;
}
.xp-barchart-value {
font-size: 10px !important;
}
.xp-barchart-x-label {
font-size: 9px !important;
}
/* Responsive Trend Chart */
.xp-trend-controls {
flex-direction: column !important;
align-items: stretch !important;
}
.xp-trend-hover-blocks {
grid-template-columns: repeat(2, 1fr) !important; /* 2 blocks per row */
}
.xp-performance-trend-container {
height: 200px !important; /* Smaller height on mobile */
}
.xp-map-type-controls {
top: 60px !important; /* Move below header on small screens */
}
.xp-map-action-controls {
top: 60px !important; /* Move below header on small screens */
}
}
@media (max-width: 480px) {
.xp-header-status {
display: none !important;
}
.xp-message-wrapper {
max-width: 90% !important;
}
.xp-message {
font-size: 0.9rem !important;
}
.xp-sidebar-expanded {
width: 160px !important;
}
.xp-info-label {
width: 120px !important;
}
.xp-quiz-option {
padding: 10px !important;
}
/* Smaller bar chart on mobile */
.xp-barchart-container {
padding: 10px !important;
height: 300px !important;
}
.xp-barchart {
height: 230px !important;
margin-left: 25px !important;
}
.xp-barchart-y-ticks {
left: -25px !important;
width: 25px !important;
}
.xp-barchart-column {
width: 40px !important;
}
.xp-barchart-bar {
width: 25px !important;
}
.xp-barchart-value {
font-size: 9px !important;
top: -20px !important;
}
.xp-barchart-x-label {
font-size: 8px !important;
max-width: 40px !important;
}
/* Email composer adjustments */
.xp-email-composer-container {
height: 90vh !important;
max-height: none !important;
}
.xp-email-field label {
width: 40px !important;
font-size: 0.8rem !important;
}
.xp-email-field span, .xp-email-field input {
font-size: 0.85rem !important;
}
.xp-email-textarea {
font-size: 0.9rem !important;
}
.xp-email-send-btn {
padding: 8px 18px !important;
font-size: 0.9rem !important;
}
/* Smaller trend chart hover blocks */
.xp-trend-hover-blocks {
grid-template-columns: repeat(2, 1fr) !important; /* Stack to 2 columns */
}
.xp-trend-hover-value { font-size: 1rem !important; }
.xp-trend-hover-label { font-size: 0.7rem !important; }
.xp-file-preview-content { /* Adjust file preview modal for very small screens */
width: 95vw !important;
height: 85vh !important;
}
.xp-agent-map-preview-container {
width: 100% !important; /* Full width in small bubble */
max-width: 200px !important;
height: 140px !important;
}
.xp-map-type-controls {
flex-wrap: wrap !important;
width: auto !important;
max-width: calc(100% - 100px) !important; /* Avoid overlap with action controls */
}
.xp-map-type-button {
width: 32px !important;
height: 32px !important;
}
.xp-map-type-button img {
width: 18px !important;
height: 18px !important;
}
}
/* Patrol Map Feature Styles - NEW */
#xp-patrol-map-render-area { /* Styles for the map container itself */
flex-grow: 1 !important;
width: 100% !important;
background-color: #e0e0e0 !important; /* Placeholder color */
}
.xp-patrol-map-message { /* Styles for messages like "NO PATROL TEAMS AVAILABLE" */
position: absolute !important;
top: 70px !important; /* Adjusted to be below map controls */
left: 50% !important;
transform: translateX(-50%) !important;
background-color: rgba(220, 53, 69, 0.9) !important; /* Default error red */
color: white !important;
padding: 12px 20px !important;
border-radius: 6px !important;
box-shadow: 0 3px 7px rgba(0,0,0,0.15) !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
text-align: center !important;
z-index: 10002 !important; /* Above map, below overlay controls if any fixed ones existed */
display: none !important; /* Hidden by default */
max-width: 80% !important;
}
/*
==================================================================
=== NEW PATROL TEAM TOOLTIP STYLES (REPLACING/OVERRIDING OLD) ===
==================================================================
These styles target the InfoWindow content structure currently
generated by the JavaScript function 'updatePatrolInfoWindowContent'.
The behavioral instruction "tooltip only shows on patrol icon hover"
is controlled by JavaScript. These CSS rules style the tooltip's
appearance when it *is* made visible.
*/
.xp-patrol-tooltip-content {
font-family: "Segoe UI", "Roboto", "Arial", sans-serif !important;
background-color: rgba(26, 26, 26, 0.9) !important; /* #1a1a1a with ~0.9 opacity */
color: #e0e0e0 !important; /* very light gray base text */
padding: 10px 12px !important; /* Adjusted padding */
border-radius: 4px !important; /* Clean, modern look */
border: none !important; /* No border */
min-width: 160pxpx !important;
max-width: 200px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
line-height: 1.5 !important; /* Adjusted line height */
}
/* Patrol ID styling */
.xp-patrol-tooltip-content .xp-tooltip-id {
font-size: 13px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #ffffff !important; /* White text for ID */
margin-bottom: 8px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
display: block !important; /* Ensure it takes full width for border */
}
/* General paragraph styling within the tooltip */
.xp-patrol-tooltip-content p {
font-size: 13px !important; /* Base size for p text */
font-weight: 500 !important; /* Medium weight for p text */
color: #e0e0e0 !important;
margin: 0 0 6px 0 !important; /* Spacing between lines */
display: flex !important; /* For icon alignment */
align-items: center !important;
position: relative !important; /* For pseudo-element positioning */
padding-left: 22px !important; /* Space for icon */
}
/* Hide original strong tags if they are just labels */
.xp-patrol-tooltip-content p strong {
display: none !important; /* Hiding "Distance to Customer:", "ETA:", "Status:" as icons will represent this */
}
/* Icon styling using ::before */
.xp-patrol-tooltip-content p::before {
content: '' !important;
display: inline-block !important;
width: 16px !important; /* Icon size */
height: 16px !important; /* Icon size */
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
position: absolute !important;
left: 0px !important; /* Position icon to the far left of the padding */
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Specific icons for each type of information line */
/* For Distance */
.xp-patrol-tooltip-content p:has(span.xp-tooltip-distance)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff' width='16px' height='16px'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
}
/* For ETA / EAT */
.xp-patrol-tooltip-content p:has(span.xp-tooltip-eta)::before,
.xp-patrol-tooltip-content p:has(span.xp-tooltip-eat)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc107' width='16px' height='16px'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E") !important;
}
/* For Status Line (this is the "Status Badge") */
.xp-patrol-tooltip-content p:has(span.xp-tooltip-status-available),
.xp-patrol-tooltip-content p:has(span.xp-tooltip-status-enroute) {
margin-top: 8px !important; /* Spacing for status badge */
padding-top: 8px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Separator for status badge */
}
/* Icon for AVAILABLE status */
.xp-patrol-tooltip-content p:has(span.xp-tooltip-status-available)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745' width='16px' height='16px'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 12.17l7.59-7.59L19 6l-9 9z'/%3E%3C/svg%3E") !important;
}
/* Icon for EN ROUTE status */
.xp-patrol-tooltip-content p:has(span.xp-tooltip-status-enroute)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fd7e14' width='16px' height='16px'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important;
}
/* Styling for the actual text values (distance, ETA, status text) */
.xp-patrol-tooltip-content .xp-tooltip-distance,
.xp-patrol-tooltip-content .xp-tooltip-eta,
.xp-patrol-tooltip-content .xp-tooltip-eat {
font-size: 13px !important;
font-weight: 500 !important; /* Medium weight */
color: #ffffff !important; /* White text for values */
}
.xp-patrol-tooltip-content .xp-tooltip-status-available,
.xp-patrol-tooltip-content .xp-tooltip-status-enroute {
font-size: 12px !important;
font-weight: bold !important;
color: #ffffff !important; /* White text for status value */
text-transform: uppercase !important;
}
/* Remove default InfoWindow padding and arrows if possible via CSS (might not fully work) */
.gm-style-iw-c {
padding: 0 !important;
background-color: transparent !important; /* Make wrapper transparent */
box-shadow: none !important;
border: none !important;
}
.gm-style-iw-d {
overflow: hidden !important; /* Prevent scrollbars on the direct child of iw-c */
}
.gm-style .gm-style-iw-tc::after { /* Attempt to hide the tail */
display: none !important;
}
/* InfoWindow close button to somewhat match dark theme, though it's hard to style perfectly */
.gm-ui-hover-effect {
background-color: rgba(52, 73, 94, 0.8) !important; /* Darker, semi-transparent */
border-radius: 50% !important;
opacity: 0.7 !important;
right: 6px !important; /* Adjust position */
top: 6px !important; /* Adjust position */
display: none !important; /* ADD THIS LINE TO HIDE THE BUTTON */
}
.gm-ui-hover-effect span { /* The 'X' itself */
color: #ecf0f1 !important;
font-weight: bold !important;
}
.gm-ui-hover-effect:hover {
opacity: 1 !important;
background-color: rgba(52, 73, 94, 1) !important;
}
/* ================================================================
=== END OF NEW PATROL TEAM TOOLTIP STYLES ===
================================================================ */
/* Specific for patrol vehicle/bike icons if needed beyond JS opacity change */
.xp-patrol-marker-enroute {
/* You could add a filter: grayscale(100%); if opacity isn't enough,
but this would apply to the marker icon itself, which is controlled by Google Maps.
Opacity is generally preferred for Google Maps markers. */
}
/* Hide the "Location Source" line in the patrol tooltip */
.xp-patrol-tooltip-content .xp-tooltip-id + p {
display: none !important;
}
/* --- START: Patrol Info Sliding Panel Styles --- */
.xp-patrol-info-panel {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 40vh !important; /* Approximately 40% of screen height */
min-height: 280px !important; /* Minimum height for content visibility */
max-height: 40vh !important;
background-color: white !important;
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) !important;
transform: translateY(calc(100% - 30px)) !important; /* Hidden by default */
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
z-index: 1000000 !important; /* High z-index to be above map, adjust if needed for chat */
display: none !important; /* Hide by default */
display: none !important;
flex-direction: column !important;
overflow: hidden !important; /* Prevent content spill during animation */
}
/* --- NEW --- This shows the patrol panel ONLY when the map overlay is active */
#xp-agent-map-overlay.active ~ #xp-patrol-info-panel {
display: flex !important;
}
.xp-patrol-info-panel.active {
transform: translateY(0) !important; /* Slides into view */
}
.xp-patrol-panel-drag-handle {
width: 50px !important;
height: 6px !important;
background-color: #ccc !important;
border-radius: 3px !important;
margin: 8px auto !important;
cursor: grab !important;
}
.xp-patrol-panel-drag-handle:active {
cursor: grabbing !important;
}
.xp-patrol-panel-content-wrapper {
flex-grow: 1 !important;
overflow-y: auto !important;
padding: 0 20px 20px 20px !important; /* Padding for content */
display: flex !important;
flex-direction: column !important;
gap: 15px !important; /* Space between sections */
}
.xp-patrol-panel-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-top: 5px !important; /* Reduced top padding as drag handle gives space */
padding-bottom: 10px !important;
border-bottom: 1px solid #eee !important;
}
.xp-patrol-panel-id {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #333 !important;
}
.xp-patrol-panel-vehicle-icon {
font-size: 1.8rem !important; /* Adjust size as needed */
}
.xp-patrol-panel-eta-block {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
background-color: #f8f9fa !important;
padding: 12px !important;
border-radius: 8px !important;
}
.xp-patrol-panel-eta-value {
font-size: 1.4rem !important;
font-weight: 700 !important;
color: #3a0a62 !important;
}
.xp-patrol-panel-eta-note {
font-size: 0.9rem !important;
color: #555 !important;
}
.xp-patrol-panel-eta-note strong i { /* Target the bold/italic note */
font-weight: bold !important;
font-style: italic !important;
}
.xp-patrol-panel-speed {
font-size: 1rem !important;
color: #777 !important;
padding: 8px 0 !important;
opacity: 0.5 !important; /* Visually disabled */
}
.xp-patrol-panel-buttons-row {
display: flex !important;
gap: 15px !important;
}
.xp-patrol-panel-button {
flex: 1 !important;
padding: 12px !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
border-radius: 6px !important;
border: none !important;
cursor: pointer !important;
transition: background-color 0.2s ease, opacity 0.2s ease !important;
text-align: center !important;
}
.xp-patrol-panel-button.dispatch {
background-color: #dc3545 !important; /* Red for dispatch */
color: white !important;
}
.xp-patrol-panel-button.chat-unit {
background-color: #007bff !important; /* Blue for chat */
color: white !important;
}
.xp-patrol-panel-controls-section {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding-top: 10px !important;
border-top: 1px solid #eee !important;
}
.xp-patrol-panel-control-item {
font-size: 0.9rem !important;
color: #3a0a62 !important;
padding: 8px 0 !important;
cursor: default !important;
opacity: 0.5 !important; /* Visually disabled */
pointer-events: none !important; /* Disabled by default */
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* --- START: WHITE THEME Patrol Info Sliding Panel Styles --- */
/* Overall Panel Appearance */
.xp-patrol-info-panel {
background-color: #FFFFFF !important; /* White background */
color: #333333 !important; /* Dark text for contrast */
border-top-left-radius: 24px !important;
border-top-right-radius: 24px !important;
min-height: 330px !important; /* Slightly increased for new card layout */
box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.12) !important; /* Standard shadow for white panels */
/* Keep existing position, bottom, left, width, height, transform, transition, z-index, display, flex-direction, overflow */
}
/* --- NEW --- This rule makes the panel disappear completely */
.xp-patrol-info-panel.xp-panel-vanished {
display: none !important;
}
.xp-patrol-panel-drag-handle {
width: 50px !important;
height: 5px !important;
background-color: #D1D1D6 !important; /* Light grey handle for white background */
margin: 10px auto !important;
}
.xp-patrol-panel-content-wrapper {
padding: 5px 20px 20px 20px !important; /* Adjusted padding */
gap: 16px !important;
}
/* Header Section */
.xp-patrol-panel-header {
display: flex !important;
justify-content: space-between !important; /* This will push items to ends if only two */
align-items: center !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #E5E5EA !important; /* Light border for white theme */
margin-bottom: 12px !important;
}
.xp-patrol-panel-header-info { /* New wrapper for ID and Icon */
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.xp-patrol-panel-id {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: #1D1D1F !important; /* Darker text for ID */
}
.xp-patrol-panel-vehicle-icon-container {
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* background-color: #f0f0f0 !important; /* Optional: light grey background for icon container */
/* border-radius: 6px !important; */
}
#xp-patrol-panel-vehicle-icon-img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
/* Main Info Section (ETA & Speed) */
.xp-patrol-panel-main-info {
display: flex !important;
justify-content: space-between !important;
align-items: stretch !important; /* Make them stretch to same height */
gap: 15px !important;
margin-bottom: 15px !important;
}
.xp-patrol-panel-eta-block {
flex: 1 !important; /* Takes half the space */
background-color: #F5F5F7 !important; /* Light grey background for elements */
padding: 15px !important;
border-radius: 10px !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Center content vertically */
}
.xp-patrol-panel-eta-label {
font-size: 0.7rem !important;
color: #6C6C72 !important; /* Medium grey for label */
text-transform: uppercase !important;
margin-bottom: 3px !important;
font-weight: 500 !important;
}
.xp-patrol-panel-eta-value {
font-size: 2rem !important;
font-weight: 700 !important;
color: #1D1D1F !important; /* Dark text for ETA value */
line-height: 1.1 !important;
font-family: 'Orbitron', sans-serif !important;
}
.xp-patrol-panel-eta-note {
font-size: 0.8rem !important;
color: #8A8A8E !important; /* Lighter grey for note */
font-style: italic !important;
margin-top: 2px !important;
}
.xp-patrol-panel-eta-note strong {
font-weight: normal !important;
}
/* --- NEW: Mission Telemetry Panel Styles --- */
.xp-patrol-telemetry-container {
flex: 1 !important;
background-color: #F5F5F7 !important;
border-radius: 10px !important;
padding: 12px 15px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.xp-telemetry-metrics-grid {
display: flex !important;
justify-content: space-between !important;
border-bottom: 1px solid #E5E5EA !important;
padding-bottom: 10px !important;
}
.xp-telemetry-metric {
text-align: center !important;
flex-basis: 50% !important;
}
.xp-telemetry-metric:first-child {
border-right: 1px solid #E5E5EA !important;
padding-right: 10px !important;
}
.xp-telemetry-metric:last-child {
padding-left: 10px !important;
}
.xp-telemetry-metric-label {
font-size: 0.7rem !important;
color: #6C6C72 !important;
text-transform: uppercase !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
.xp-telemetry-metric-value {
font-size: 2rem !important;
font-weight: 700 !important;
color: #1D1D1F !important;
line-height: 1.1 !important;
font-family: 'Orbitron', sans-serif !important;
}
.xp-telemetry-metric-value span {
font-size: 1.2rem !important;
font-weight: 500 !important;
color: #6C6C72 !important;
}
.xp-maneuver-container {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 0 !important;
border-bottom: 1px solid #E5E5EA !important;
}
.xp-maneuver-icon {
width: 36px !important;
height: 36px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #e0e0e0 !important;
border-radius: 8px !important;
}
.xp-maneuver-icon svg {
width: 24px !important;
height: 24px !important;
}
.xp-maneuver-text {
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #333 !important;
line-height: 1.3 !important;
}
.xp-context-bar {
font-size: 0.8rem !important;
color: #8A8A8E !important;
text-align: center !important;
padding-top: 8px !important;
}
.xp-context-bar strong {
color: #6C6C72 !important;
}
/* --- NEW --- This is the style for the mileage card */
.xp-approaching-distance-card {
display: inline-block !important;
background-color: #3a0a62 !important; /* Main theme purple */
color: #FFFFFF !important; /* White text */
padding: 2px 8px !important;
border-radius: 4px !important;
font-weight: 600 !important;
font-size: 0.85rem !important; /* Slightly larger font */
margin-left: 5px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
/* --- END NEW --- */
/* --- END: Mission Telemetry Panel Styles --- */
/* Action Buttons Section */
.xp-patrol-panel-buttons-row {
margin-top: 0px !important; /* Adjusted spacing */
gap: 12px !important;
}
.xp-patrol-panel-button {
padding: 14px !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
border-radius: 10px !important;
/* opacity/pointer-events handled by .disabled-control or :not(.disabled-control) */
}
.xp-button-icon-img {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
}
.xp-patrol-panel-button.dispatch {
background-color: #FF3B30 !important;
color: white !important;
}
.xp-patrol-panel-button.dispatch:not(.disabled-control):hover {
background-color: #FF5C53 !important;
}
.xp-patrol-panel-button.chat-unit {
background-color: #007AFF !important; /* Standard iOS Blue */
color: white !important;
}
.xp-patrol-panel-button.chat-unit:not(.disabled-control):hover {
background-color: #3397FF !important;
}
/* Controls Section (View Route, Focus Map) - CARD STYLE */
.xp-patrol-panel-control-cards {
display: flex !important;
gap: 12px !important;
margin-top: 10px !important;
}
.xp-patrol-panel-control-card {
flex: 1 !important;
background-color: #F5F5F7 !important;
border-radius: 10px !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 8px !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
color: #007AFF !important; /* Action blue */
cursor: pointer !important;
transition: background-color 0.2s ease, transform 0.1s ease !important;
}
.xp-patrol-panel-control-card:not(.disabled-control):hover {
background-color: #E9E9EB !important;
transform: translateY(-2px) !important;
}
.xp-patrol-panel-control-card:not(.disabled-control):active {
transform: translateY(0px) !important;
background-color: #DFDFE2 !important;
}
.xp-control-card-icon {
width: 28px !important; /* Larger icon for card */
height: 28px !important;
object-fit: contain !important;
}
.xp-patrol-panel-control-card span {
line-height: 1.2 !important;
}
/* Hide old controls section if it still exists structurally */
.xp-patrol-panel-controls-section {
display: none !important;
}
/* Generic disabled state for panel interactive elements */
.xp-patrol-panel-button.disabled-control,
.xp-patrol-panel-control-card.disabled-control { /* Updated selector */
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
background-color: #E9E9EB !important; /* Light grey disabled background */
color: #AEAEB2 !important; /* Dimmed text for disabled */
}
.xp-patrol-panel-button.dispatch.disabled-control {
background-color: #FFB2AE !important; /* Lighter, desaturated red */
color: #FFFFFF !important;
}
.xp-patrol-panel-button.chat-unit.disabled-control {
background-color: #B3D7FF !important; /* Lighter, desaturated blue */
color: #FFFFFF !important;
}
.xp-patrol-panel-control-card.disabled-control {
color: #AEAEB2 !important; /* Ensure text color is dimmed */
}
.xp-patrol-panel-control-card.disabled-control .xp-control-card-icon {
opacity: 0.5 !important;
}
/* --- END: WHITE THEME Patrol Info Sliding Panel Styles --- */
/* --- START: Dispatch Patrol Countdown Modal --- */
#xp-dispatch-countdown-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.7) !important; /* Darker overlay for focus */
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000001 !important;
animation: fadeIn 0.3s ease-out !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
#xp-dispatch-countdown-modal.active {
display: flex !important;
}
.xp-dispatch-countdown-container {
background-color: white !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
max-width: 360px !important;
padding: 30px !important;
text-align: center !important;
animation: slideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.xp-dispatch-countdown-header-text {
font-size: 0.9rem !important;
font-weight: 600 !important;
color: #888 !important; /* Muted color for header */
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 4px !important;
}
.xp-dispatch-countdown-id-text {
font-size: 1.1rem !important;
font-weight: 500 !important;
color: #555 !important;
margin-bottom: 20px !important;
}
#xp-dispatch-patrol-id {
font-weight: 700 !important;
color: #3a0a62 !important; /* Main theme color */
}
#xp-dispatch-timer-numeric {
font-family: 'Orbitron', sans-serif !important; /* Techy font */
font-size: 3.5rem !important; /* Bolder as requested */
font-weight: 700 !important;
color: #333 !important;
margin-bottom: 25px !important;
line-height: 1 !important;
}
.xp-analog-clock-container {
width: 160px !important; /* Slightly larger for better visuals */
height: 160px !important;
border-radius: 50% !important;
background: linear-gradient(145deg, #ffffff, #e6e6e6) !important; /* Subtle gradient for glass effect */
border: 1px solid #dcdcdc !important;
position: relative !important;
margin: 0 auto 30px auto !important;
box-shadow: 7px 7px 15px rgba(0,0,0,0.08), -7px -7px 15px #ffffff, inset 3px 3px 5px #f0f0f0, inset -3px -3px 5px #ffffff !important; /* 3D effect */
}
.xp-analog-clock-mark {
position: absolute !important;
background-color: #1c1c1c !important; /* Dark black for markers */
transform-origin: 50% 80px !important; /* 80px is the radius (160px / 2) */
top: 3px !important; /* Pull markers in from the edge slightly */
left: calc(50% - 1.5px) !important;
border-radius: 2px !important;
}
.xp-analog-clock-mark.hour-mark {
width: 5px !important; /* Thicker hour marks */
height: 18px !important; /* Longer hour marks */
left: calc(50% - 2.5px) !important;
}
.xp-analog-clock-mark.minute-mark {
width: 2px !important;
height: 8px !important; /* Shorter minute marks */
}
.xp-analog-clock-center-dot {
width: 8px !important;
height: 8px !important;
background-color: #333 !important;
border-radius: 50% !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10 !important;
}
.xp-analog-minute-hand {
width: 4px !important;
height: 55px !important;
background-color: #1c1c1c !important; /* Black minute hand */
position: absolute !important;
bottom: 50% !important;
left: calc(50% - 2px) !important;
transform-origin: 50% 100% !important;
z-index: 4 !important;
border-radius: 2px !important;
}
.xp-analog-second-hand {
width: 2px !important;
height: 65px !important;
background-color: #bda17c !important; /* Gold/brass second hand */
position: absolute !important;
bottom: 50% !important;
left: calc(50% - 1px) !important;
transform-origin: 50% 100% !important;
z-index: 5 !important; /* On top of minute hand */
border-radius: 1px !important;
}
.xp-dispatch-cancel-button {
background-color: #e53935 !important;
color: white !important;
border: none !important;
padding: 14px 25px !important;
border-radius: 10px !important;
font-size: 1rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
width: 100% !important;
margin-top: 10px !important;
box-shadow: 0 4px 10px rgba(229, 57, 53, 0.3) !important;
}
.xp-dispatch-cancel-button:hover {
background-color: #c62828 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 15px rgba(229, 57, 53, 0.4) !important;
}
.xp-dispatch-cancel-button:active {
transform: translateY(0) !important;
box-shadow: 0 4px 10px rgba(229, 57, 53, 0.3) !important;
}
/* --- END: Dispatch Patrol Countdown Modal --- */
/* --- NEW: Patrol Panel Status Badge Styles --- */
.xp-patrol-panel-status-badge {
padding: 5px 12px !important;
border-radius: 16px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
}
.xp-patrol-panel-status-badge.available {
background-color: #E8F5E9 !important; /* Light Green */
color: #2E7D32 !important; /* Dark Green */
border: 1px solid #A5D6A7 !important;
}
.xp-patrol-panel-status-badge.en-route {
background-color: #FFF8E1 !important; /* Light Yellow */
color: #FF8F00 !important; /* Amber */
border: 1px solid #FFECB3 !important;
}
.xp-patrol-panel-status-badge.dispatched-en-route {
background-color: #E3F2FD !important; /* Light Blue */
color: #1565C0 !important; /* Dark Blue */
border: 1px solid #90CAF9 !important;
}
/* --- END: Patrol Panel Status Badge Styles --- */
/* --- NEW: Final Advanced Telemetry Panel Styles --- */
/* Main container using the light theme */
.xp-telemetry-container-grid {
flex: 1 !important;
background-color: #F5F5F7 !important; /* Light grey background */
border-radius: 10px !important;
padding: 12px 15px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
color: #1D1D1F !important; /* Dark text color */
}
/* Top Section: Current Heading & Next Maneuver */
.xp-telemetry-top-section {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
border-bottom: 1px solid #E5E5EA !important;
padding-bottom: 8px !important;
}
.xp-current-heading {
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.xp-current-heading-icon {
width: 48px !important;
height: 48px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-current-heading-icon svg {
width: 100% !important;
height: 100% !important;
}
/* BOLDER ICONS: This adds a stroke to your SVG paths */
.xp-current-heading-icon svg path,
.xp-next-maneuver-icon svg path {
stroke: #333333 !important; /* Dark outline for light theme */
stroke-width: 0.5px !important;
}
.xp-current-heading-details {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
overflow: hidden !important;
}
.xp-heading-label {
font-size: 0.8rem !important;
font-weight: 600 !important;
color: #6C6C72 !important;
text-transform: uppercase !important;
}
.xp-road-info {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* --- HIGHWAY SHIELD STYLES --- */
.xp-road-shield {
color: #000000 !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 4px 6px !important;
border-radius: 4px !important;
min-width: 22px !important;
text-align: center !important;
display: none; /* Hidden by default */
}
.xp-road-shield.is-interstate {
background-color: #003f87 !important;
color: #FFFFFF !important;
border: 2px solid #FFFFFF !important;
box-shadow: 0 0 0 1px #003f87; /* Prevents transparent border gap */
clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
}
.xp-road-shield.is-us-highway {
background-color: #FFFFFF !important;
border: 2px solid #000000 !important;
clip-path: polygon(0% 15%, 15% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
}
.xp-road-shield.is-bia-road {
background-color: #FFFFFF !important;
border: 2px solid #000000 !important;
}
/* --- END SHIELD STYLES --- */
.xp-road-name {
font-size: 1.3rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Next Maneuver (Now under the main one) */
.xp-next-maneuver-section {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding-left: 63px; /* Aligns with details above */
}
.xp-next-maneuver-icon {
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
}
.xp-next-maneuver-icon svg {
width: 100% !important;
height: 100% !important;
}
.xp-next-maneuver-text {
font-size: 1rem !important;
font-weight: 500 !important;
color: #333 !important;
}
/* --- DISTANCE COLOR CODING --- */
.xp-next-maneuver-distance {
font-weight: 700 !important;
transition: color 0.5s ease;
}
.xp-next-maneuver-distance.distance-green {
color: #28a745 !important;
}
.xp-next-maneuver-distance.distance-yellow {
color: #ffc107 !important;
}
.xp-next-maneuver-distance.distance-red {
color: #dc3545 !important;
}
/* Bottom Section: Metrics */
.xp-telemetry-bottom-section {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-top: 8px !important;
}
.xp-telemetry-bottom-section .xp-metric {
flex: 1 !important;
text-align: center !important;
}
.xp-telemetry-bottom-section .xp-metric:first-child {
text-align: left !important;
}
.xp-telemetry-bottom-section .xp-metric:last-child {
text-align: right !important;
}
.xp-metric {
text-align: left !important;
}
.xp-metric-label {
font-size: 0.75rem !important;
color: #6C6C72 !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.xp-metric-value {
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
font-family: 'Orbitron', sans-serif !important;
}
.xp-metric-value span {
font-size: 0.9rem !important;
font-weight: 500 !important;
color: #6C6C72 !important;
}
/* --- END Final Panel Styles --- */
/* --- NEW: Make Maneuver Icons Bolder --- */
.xp-main-maneuver-icon svg path,
.xp-next-maneuver-icon svg path {
stroke: #FFFFFF !important; /* White outline for dark theme */
stroke-width: 0.5px !important; /* Adjust this value for desired thickness */
}
.xp-telemetry-container-grid.light-theme .xp-main-maneuver-icon svg path,
.xp-telemetry-container-grid.light-theme .xp-next-maneuver-icon svg path {
stroke: #333333 !important; /* Dark outline for light theme */
}
/* --- END NEW STYLES --- */
/* --- START: Mapbox Focus Map Styles --- */
#mapbox-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.4s ease-in-out !important;
z-index: 10001 !important; /* Above Google Map but below overlay controls */
}
#mapbox-container.visible {
opacity: 1 !important;
visibility: visible !important;
}
/* --- START: Patrol Panel Chat Feature Styles --- */
.xp-patrol-panel-view {
display: none !important; /* Hide all views by default */
width: 100% !important;
height: 100% !important;
flex-direction: column !important;
}
.xp-patrol-panel-view.active {
display: flex !important; /* Show the active view */
}
/* Loading View */
#xp-patrol-panel-loading-view {
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
}
/* Chat View */
#xp-patrol-panel-chat-view {
height: 100% !important;
max-height: 100% !important;
}
.xp-patrol-chat-header {
display: flex !important;
align-items: center !important;
padding: 10px 15px !important;
border-bottom: 1px solid #E5E5EA !important;
flex-shrink: 0 !important;
}
.xp-patrol-chat-back-btn {
background: none !important;
border: none !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #007AFF !important;
cursor: pointer !important;
padding: 5px !important;
margin-right: 15px !important;
}
#xp-patrol-chat-title {
font-size: 1rem !important;
font-weight: 600 !important;
color: #1D1D1F !important;
}
.xp-patrol-chat-messages {
flex-grow: 1 !important;
overflow-y: auto !important;
padding: 15px !important;
background-color: #F5F5F7 !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
#xp-patrol-typing-indicator {
padding: 8px 15px !important;
align-self: flex-start !important; /* Keep it on the left */
margin: 0 15px 5px 15px !important; /* Position it above the input */
border-radius: 15px !important;
z-index: 1 !important;
display: none !important; /* Hidden by default */
}
#xp-patrol-typing-indicator.active {
display: flex !important;
}
.xp-patrol-chat-input {
display: flex !important;
padding: 10px 15px !important;
background-color: #FFFFFF !important;
border-top: 1px solid #E5E5EA !important;
flex-shrink: 0 !important;
gap: 10px !important;
}
.xp-patrol-chat-input input {
flex: 1 !important;
padding: 10px 15px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 20px !important;
outline: none !important;
font-size: 0.9rem !important;
background-color: #f5f5f5 !important;
}
.xp-patrol-chat-input input:focus {
border-color: #007AFF !important;
background-color: white !important;
}
.xp-patrol-chat-input button {
background-color: #007AFF !important;
color: white !important;
border: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xp-patrol-chat-input button svg {
width: 18px !important;
height: 18px !important;
}
/* --- END: Patrol Panel Chat Feature Styles --- */
/* --- NEW: Invisible Map Container for Background Simulation --- */
#xp-invisible-map-container {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* --- END: Invisible Map Container --- */
/* Custom Marker for Patrol Units (Walmart Logo) */
.xp-walmart-patrol-marker {
width: 35px !important; /* Adjusted size for visibility */
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: transparent !important; /* Ensure no background from div itself */
border: none !important; /* Remove any default border */
}
.xp-walmart-patrol-marker img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Ensure image fits without stretching */
}
/* --- NEW: Style for dispatched, non-interactive units --- */
.xp-patrol-marker-dispatched {
pointer-events: none !important; /* Makes the marker unclickable */
filter: saturate(0.5); /* Optional: Visually indicate it's busy */
}
/* --- NEW: Route Polyline Style --- */
.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-logo {
display: none !important; /* Hide Mapbox attribution on the invisible map */
}
/* --- NEW: Map Close Warning Overlay Styles --- */
.xp-map-close-warning-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: transparent !important; /* The background is on the content, not the overlay */
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000001 !important; /* Extremely high to be on top of everything */
pointer-events: none !important; /* Allows clicking through the overlay when invisible */
opacity: 0 !important;
transition: opacity 0.4s ease-in-out !important;
}
.xp-map-close-warning-overlay.active {
opacity: 1 !important;
}
.xp-map-close-warning-content {
background-color: rgba(30, 30, 30, 0.9) !important;
color: white !important;
padding: 20px 25px !important;
border-radius: 12px !important;
box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
max-width: 90% !important;
text-align: left !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.xp-map-close-warning-overlay.active .xp-map-close-warning-content {
transform: scale(1);
}
.xp-map-close-warning-content svg {
width: 32px !important;
height: 32px !important;
color: #ffc107 !important; /* Amber warning color */
flex-shrink: 0 !important;
}
.xp-map-close-warning-content p {
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
line-height: 1.4 !important;
font-weight: 500 !important;
}
/* --- END NEW --- */
/* --- NEW: Gate Keeper Lock Overlay (v7 - Pure Liquid Glass) --- */
.xp-gatekeeper-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: transparent !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
z-index: 1000002 !important;
animation: fadeIn 0.5s ease-out !important;
pointer-events: none !important;
}
.xp-gatekeeper-overlay.active {
display: flex !important;
pointer-events: auto !important;
}
.xp-gatekeeper-container {
/* PURE GLASS EFFECT: Reduced opacity for transparency */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2), /* Reduced from 0.8 */
rgba(255, 255, 255, 0.1) /* Reduced from 0.6 */
) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Softer border */
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important; /* Slightly stronger shadow for contrast */
position: relative !important;
border-radius: 24px !important;
color: #000000 !important;
width: 100% !important;
max-width: 480px !important;
padding: 30px !important;
text-align: center !important;
animation: slideInUp 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 15px !important;
}
.xp-gatekeeper-icon {
width: 60px !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: rgba(255, 59, 48, 0.15) !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 59, 48, 0.3) !important;
}
.xp-gatekeeper-icon svg {
width: 32px !important;
height: 32px !important;
color: #FF3B30 !important;
}
.xp-gatekeeper-title {
font-size: 1.4rem !important;
font-weight: 600 !important;
margin: 0 !important;
color: #1d1d1f !important;
}
.xp-gatekeeper-message {
font-size: 1rem !important;
line-height: 1.6 !important;
color: #333333 !important;
max-width: 400px !important;
}
.xp-gatekeeper-message strong {
color: #000000 !important;
font-weight: 600 !important;
}
.xp-gatekeeper-close-btn {
background-color: rgba(255, 255, 255, 0.3) !important; /* Button is slightly more visible than the background */
color: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
padding: 12px 30px !important;
border-radius: 12px !important;
font-size: 1rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin-top: 15px !important;
}
.xp-gatekeeper-close-btn:hover {
background-color: rgba(255, 255, 255, 0.45) !important;
transform: translateY(-2px) !important;
}
.xp-gatekeeper-close-btn:active {
transform: scale(0.96) !important;
background-color: rgba(255, 255, 255, 0.25) !important;
}
/* --- NEW: Cancel Dispatch Confirmation Modal Styles --- */
.xp-cancel-dispatch-actions {
display: flex !important;
gap: 15px !important;
width: 100% !important;
margin-top: 15px !important;
}
.xp-cancel-dispatch-actions .xp-gatekeeper-close-btn {
flex: 1 !important;
margin-top: 0 !important;
}
.xp-cancel-dispatch-actions .xp-confirm-btn {
background-color: rgba(255, 59, 48, 0.3) !important; /* Red tint */
border-color: rgba(255, 59, 48, 0.4) !important;
}
.xp-cancel-dispatch-actions .xp-confirm-btn:hover {
background-color: rgba(255, 59, 48, 0.45) !important;
}
.xp-cancel-dispatch-actions .xp-confirm-btn:active {
background-color: rgba(255, 59, 48, 0.25) !important;
}