.progdash-ai-chatbox {
border: 1px solid #d6d8dc;
border-radius: 12px;
background: #fff;
max-width: 860px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(18, 28, 45, 0.08);
}
.progdash-ai-floating {
position: fixed;
right: 18px;
bottom: 18px;
width: min(420px, calc(100vw - 24px));
z-index: 2147483000;
}
.progdash-ai-floating .progdash-ai-chatbox {
max-width: 100%;
}
.progdash-ai-floating .progdash-ai-launcher {
display: none;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #2271b1 0%, #1a5f99 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 10px 24px rgba(34, 113, 177, 0.28);
position: relative;
padding: 0;
}
.progdash-ai-floating .progdash-ai-launcher:hover,
.progdash-ai-floating .progdash-ai-launcher:focus {
background: linear-gradient(135deg, #1e6aa8 0%, #154f80 100%);
}
.progdash-ai-floating .progdash-ai-launcher:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.45), 0 10px 24px rgba(34, 113, 177, 0.28);
}
.progdash-ai-launcher-icon {
font-size: 22px;
line-height: 1;
}
.progdash-ai-launcher-dot {
position: absolute;
right: 6px;
bottom: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background: #d63638;
}
.progdash-ai-launcher.is-online .progdash-ai-launcher-dot {
background: #28a745;
}
.progdash-ai-launcher.is-offline .progdash-ai-launcher-dot {
background: #d63638;
}
.progdash-ai-floating.is-collapsed {
width: auto;
}
.progdash-ai-floating.is-collapsed .progdash-ai-chatbox {
display: none;
}
.progdash-ai-floating.is-collapsed .progdash-ai-launcher {
display: inline-flex;
}
.progdash-ai-floating.is-hidden {
display: none;
}
.progdash-ai-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid #e8eaee;
background: linear-gradient(135deg, #f8fbff 0%, #f2f7ff 100%);
}
.progdash-ai-header-main {
display: flex;
flex-direction: column;
gap: 2px;
}
.progdash-ai-header-identity {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.progdash-ai-header-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.progdash-ai-header-avatar-wrap {
position: relative;
display: inline-flex;
width: 30px;
height: 30px;
flex: 0 0 30px;
min-width: 30px;
min-height: 30px;
max-width: 30px;
max-height: 30px;
overflow: visible;
border-radius: 999px;
}
.progdash-ai-header-avatar-wrap::after {
display: none;
}
.progdash-ai-status-indicator {
position: absolute;
right: 0;
bottom: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: #9aa0a6;
border: 2px solid #f8fbff;
box-shadow: 0 0 0 1px rgba(34, 113, 177, 0.08);
z-index: 3;
}
.progdash-ai-header-avatar {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
border-radius: 999px;
object-fit: contain;
padding: 2px;
border: 1px solid #bfd3ea;
background: #fff;
box-shadow: 0 4px 12px rgba(34, 113, 177, 0.16);
display: block;
flex: 0 0 100%;
position: relative;
z-index: 1;
}
.progdash-ai-chatbox--online .progdash-ai-status-indicator {
background: #28a745;
}
.progdash-ai-chatbox--offline .progdash-ai-status-indicator {
background: #d63638;
}
.progdash-ai-header-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.progdash-ai-close {
width: 24px;
height: 24px;
border: 1px solid #d6d8dc;
border-radius: 6px;
background: #fff;
color: #50575e;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.progdash-ai-close:hover,
.progdash-ai-close:focus {
border-color: #2271b1;
color: #2271b1;
}
.progdash-ai-close:focus-visible,
.progdash-ai-send:focus-visible,
.progdash-ai-offline-alert-close:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
.progdash-ai-header-title {
font-weight: 600;
color: #1d2327;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progdash-ai-header-status {
display: inline-flex;
align-items: center;
gap: 6px;
color: #50575e;
font-size: 12px;
font-weight: 600;
}
.progdash-ai-header-status.is-online {
color: #1f7a36;
}
.progdash-ai-header-status.is-offline {
color: #8a4b15;
}
.progdash-ai-dot {
display: none;
}
.progdash-ai-messages {
min-height: 320px;
max-height: 520px;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 14px;
background: linear-gradient(180deg, #fbfcff 0%, #f6f8fb 100%);
}
.progdash-ai-offline-alert {
display: none;
align-items: center;
gap: 8px;
margin: 10px 12px 0;
padding: 8px 10px;
border: 1px solid #f2c8a2;
border-radius: 8px;
background: #fff8f1;
color: #7a4b14;
font-size: 12px;
}
.progdash-ai-offline-alert.is-visible {
display: flex;
}
.progdash-ai-handover-alert {
display: none;
flex-direction: column;
gap: 4px;
margin: 10px 12px 0;
padding: 10px 12px;
border: 1px solid #c7dcf2;
border-radius: 8px;
background: #f3f8ff;
color: #184f7a;
font-size: 12px;
}
.progdash-ai-chatbox--handover .progdash-ai-handover-alert,
.progdash-ai-handover-alert.is-visible {
display: flex;
}
.progdash-ai-handover-icon {
font-weight: 700;
color: #2271b1;
}
.progdash-ai-handover-text {
font-weight: 600;
}
.progdash-ai-handover-countdown {
color: #336b98;
}
.progdash-ai-offline-alert-icon {
font-weight: 700;
color: #b45309;
}
.progdash-ai-offline-alert-text {
flex: 1;
}
.progdash-ai-offline-alert-close {
border: 0;
background: transparent;
color: #7a4b14;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0 2px;
}
.progdash-ai-contact-row {
display: none;
gap: 8px;
padding: 10px 12px 0;
background: #fff;
}
.progdash-ai-chatbox--offline .progdash-ai-contact-row {
display: flex;
}
.progdash-ai-chatbox--handover .progdash-ai-contact-row {
display: flex;
}
.progdash-ai-chatbox--handover .progdash-ai-contact-email,
.progdash-ai-chatbox--handover .progdash-ai-contact-phone {
border-color: #93b7d9;
background: #f8fbff;
}
.progdash-ai-contact-email,
.progdash-ai-contact-phone {
flex: 1;
min-height: 36px;
border: 1px solid #d6d8dc;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
}
.progdash-ai-message {
display: flex;
margin-bottom: 12px;
}
.progdash-ai-message.user {
justify-content: flex-end;
}
.progdash-ai-message .progdash-ai-bubble {
max-width: 82%;
border-radius: 12px;
padding: 10px 13px;
line-height: 1.4;
font-size: 14px;
overflow-wrap: anywhere;
word-break: break-word;
}
.progdash-ai-message .progdash-ai-bubble a {
overflow-wrap: anywhere;
word-break: break-all;
}
.progdash-ai-message.assistant .progdash-ai-bubble {
background: #fff;
border: 1px solid #dfe3e8;
}
.progdash-ai-message.user .progdash-ai-bubble {
background: #2271b1;
color: #fff;
}
.progdash-ai-sources {
font-size: 12px;
color: #50575e;
background: #fff;
border: 1px solid #dfe3e8;
border-radius: 10px;
padding: 8px 10px;
margin: 6px 0 10px;
}
.progdash-ai-sources ul {
margin: 6px 0 0 16px;
}
.progdash-ai-input-row {
display: flex;
gap: 8px;
padding: 12px 12px;
border-top: 1px solid #e8eaee;
background: #fff;
}
.progdash-ai-input {
flex: 1;
min-height: 40px;
max-height: 132px;
border: 1px solid #d6d8dc;
border-radius: 10px;
padding: 10px 12px;
resize: vertical;
line-height: 1.3;
font-size: 14px;
}
.progdash-ai-send {
min-width: 42px;
width: 42px;
height: 42px;
border: 0;
border-radius: 10px;
background: #2271b1;
color: #fff;
cursor: pointer;
}
.progdash-ai-send:hover,
.progdash-ai-send:focus {
background: #135e96;
}
.progdash-ai-send:disabled {
opacity: 0.6;
cursor: default;
}
.progdash-ai-typing .progdash-ai-bubble {
color: #646970;
}
.progdash-ai-chatbox[data-theme="dark"] {
border-color: #2f3642;
background: #171a21;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header {
border-bottom-color: #2b3140;
background: linear-gradient(135deg, #1e2430 0%, #202a39 100%);
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header-title {
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header-status {
color: #cfd7e6;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header-avatar {
border-color: #3a4355;
background: #202633;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-status-indicator {
border-color: #1f2a3a;
}
.progdash-ai-chatbox[data-theme="dark"].progdash-ai-chatbox--online .progdash-ai-header-status,
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header-status.is-online {
color: #7fe09a;
}
.progdash-ai-chatbox[data-theme="dark"].progdash-ai-chatbox--offline .progdash-ai-header-status,
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-header-status.is-offline {
color: #f3b37a;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-close {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-messages {
background: linear-gradient(180deg, #171c24 0%, #131720 100%);
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-offline-alert {
border-color: #624633;
background: #3b2b20;
color: #f5d0a7;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-handover-alert {
border-color: #335277;
background: #1d2a3a;
color: #bfd6f0;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-handover-icon,
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-handover-countdown {
color: #8ebce6;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-offline-alert-icon,
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-offline-alert-close {
color: #f6ad55;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-contact-row {
background: #171a21;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-contact-email,
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-contact-phone {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-message.assistant .progdash-ai-bubble {
background: #202633;
border-color: #31394a;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-message.user .progdash-ai-bubble {
background: #2271b1;
color: #fff;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-sources {
background: #1f2633;
border-color: #31394a;
color: #d5dceb;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-input-row {
border-top-color: #2b3140;
background: #171a21;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-input {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-input::placeholder {
color: #a9b2c3;
}
.progdash-ai-chatbox[data-theme="dark"] .progdash-ai-typing .progdash-ai-bubble {
color: #b6c0d4;
}
@media (prefers-color-scheme: dark) {
.progdash-ai-chatbox[data-theme="auto"] {
border-color: #2f3642;
background: #171a21;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header {
border-bottom-color: #2b3140;
background: linear-gradient(135deg, #1e2430 0%, #202a39 100%);
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header-avatar {
border-color: #3a4355;
background: #202633;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-status-indicator {
border-color: #1f2a3a;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header-title {
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header-status {
color: #cfd7e6;
}
.progdash-ai-chatbox[data-theme="auto"].progdash-ai-chatbox--online .progdash-ai-header-status,
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header-status.is-online {
color: #7fe09a;
}
.progdash-ai-chatbox[data-theme="auto"].progdash-ai-chatbox--offline .progdash-ai-header-status,
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-header-status.is-offline {
color: #f3b37a;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-close {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-messages {
background: linear-gradient(180deg, #171c24 0%, #131720 100%);
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-offline-alert {
border-color: #624633;
background: #3b2b20;
color: #f5d0a7;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-handover-alert {
border-color: #335277;
background: #1d2a3a;
color: #bfd6f0;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-handover-icon,
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-handover-countdown {
color: #8ebce6;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-offline-alert-icon,
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-offline-alert-close {
color: #f6ad55;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-contact-row {
background: #171a21;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-contact-email,
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-contact-phone {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-message.assistant .progdash-ai-bubble {
background: #202633;
border-color: #31394a;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-sources {
background: #1f2633;
border-color: #31394a;
color: #d5dceb;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-input-row {
border-top-color: #2b3140;
background: #171a21;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-input {
border-color: #3a4355;
background: #202633;
color: #e7ebf3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-input::placeholder {
color: #a9b2c3;
}
.progdash-ai-chatbox[data-theme="auto"] .progdash-ai-typing .progdash-ai-bubble {
color: #b6c0d4;
}
}
@media (max-width: 782px) {
.progdash-ai-floating {
right: 8px;
left: 8px;
bottom: 8px;
width: auto;
}
.progdash-ai-floating.is-collapsed {
right: 8px;
left: auto;
width: auto;
}
.progdash-ai-floating .progdash-ai-messages {
max-height: 300px;
}
}
@media (max-width: 480px) {
.progdash-ai-header {
padding: 10px 11px;
}
.progdash-ai-header-avatar-wrap {
width: 26px;
height: 26px;
flex: 0 0 26px;
min-width: 26px;
min-height: 26px;
max-width: 26px;
max-height: 26px;
}
.progdash-ai-header-avatar {
padding: 1px;
}
.progdash-ai-header-status {
font-size: 11px;
}
.progdash-ai-minimize,
.progdash-ai-close {
width: 22px;
height: 22px;
}
.progdash-ai-messages {
min-height: 240px;
max-height: 56vh;
padding: 12px 10px;
}
.progdash-ai-input-row {
padding: 10px;
}
.progdash-ai-contact-row {
flex-direction: column;
padding: 8px 10px 0;
}
.progdash-ai-input {
font-size: 16px;
}
}
@media (max-width: 360px) {
.progdash-ai-header-title {
font-size: 13px;
}
}