/**
* /var/www/pavel-gorin/public/css/chat.css
* Стили для компонента AI чата (ТОЛЬКО специфичные)
* Базовые стили модального окна взяты из modal.css
*/
/* Бейдж уведомлений на кнопке чата */
.floating-btn.ai-chat .badge {
position: absolute;
top: -5px;
right: -5px;
background: var(--color-success);
color: var(--color-white);
font-size: 9px;
padding: 2px 6px;
border-radius: 10px;
border: 2px solid var(--color-bg);
}
/* === СПЕЦИФИКА ОКНА ЧАТА === */
#chatModal {
width: 600px;
max-width: 700px;
min-width: 320px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
height: 560px;
max-height: calc(100vh - 100px);
}
#chatModal .modal-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: var(--border-soft);
padding: 15px 20px;
background: var(--color-bg-light);
border-radius: var(--radius-modal) var(--radius-modal) 0 0;
flex-shrink: 0;
min-height: 60px;
position: relative;
}
/* === ИМПУЛЬС ПОД ЗАГОЛОВКОМ === */
#chatModal .modal-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-primary-light) 50%,
transparent 100%);
transform: translateX(-100%);
}
#chatModal .modal-header.connecting::after {
animation: headerPulse 2s ease-in-out infinite;
}
@keyframes headerPulse {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
#chatModal .chat-title-wrapper {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
#chatModal .modal-title {
margin: 0;
display: flex;
align-items: center;
}
#chatModal .modal-title i {
display: none;
}
#chatModal .modal-title span {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 700;
font-size: 16px;
color: var(--color-text);
}
#chatModal .modal-body {
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background: rgba(6, 25, 52, 0.92);
overflow: hidden;
}
.chat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.message {
max-width: 80%;
padding: 10px 15px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message-user {
align-self: flex-end;
background: linear-gradient(135deg, rgba(42, 87, 199, 0.6), rgba(42, 87, 199, 0.4));
border: 1px solid rgba(149, 196, 250, 0.3);
color: var(--color-white);
border-bottom-right-radius: 2px;
}
.message-bot {
align-self: flex-start;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-soft);
color: var(--color-text);
border-bottom-left-radius: 2px;
}
.message-meta {
font-size: 10px;
opacity: 0.6;
margin-top: 6px;
text-align: right;
}
.chat-input-area {
background: var(--color-bg-light);
border-top: var(--border-soft);
padding: 15px 20px;
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
transition: opacity 0.3s ease;
}
.chat-input-area.locked {
opacity: 0.5;
pointer-events: none;
}
.input-prefix {
color: var(--color-text);
font-weight: 600;
font-size: 12px;
white-space: nowrap;
font-family: 'Courier New', monospace;
}
.chat-input {
flex: 1;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(149, 196, 250, 0.3);
border-radius: var(--radius-sm);
padding: 10px 15px;
color: var(--color-text);
font-size: 14px;
outline: none;
transition: var(--transition-std);
}
.chat-input:focus {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(42, 87, 199, 0.2);
}
.chat-input:disabled {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(149, 196, 250, 0.15);
color: rgba(149, 196, 250, 0.4);
cursor: not-allowed;
}
.chat-input::placeholder {
color: rgba(149, 196, 250, 0.4);
}
.chat-input:disabled::placeholder {
color: rgba(149, 196, 250, 0.2);
}
.send-btn {
background: linear-gradient(135deg, rgba(42, 87, 199, 0.8), rgba(42, 87, 199, 0.6));
border: none;
border-radius: var(--radius-sm);
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-std);
color: var(--color-white);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.send-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
}
.send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: rgba(42, 87, 199, 0.3);
}
.typing-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: var(--color-text);
font-size: 12px;
font-style: italic;
}
.typing-indicator span {
animation: blink 1.4s infinite both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.status-badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
transition: var(--transition-std);
flex-shrink: 0;
white-space: nowrap;
}
.status-badge i {
font-size: 6px;
}
.status-online {
background: rgba(42, 87, 199, 0.3);
border: 1px solid rgba(149, 196, 250, 0.6);
color: var(--color-primary-light);
box-shadow: var(--shadow-glow);
}
.status-online i {
color: var(--color-primary-light);
text-shadow: 0 0 8px rgba(149, 196, 250, 0.8);
animation: pulse-online 2s infinite;
}
@keyframes pulse-online {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.status-offline {
background: rgba(6, 25, 52, 0.6);
border: 1px solid rgba(149, 196, 250, 0.4);
color: rgba(149, 196, 250, 0.5);
}
.status-offline i {
color: rgba(149, 196, 250, 0.3);
}
.status-connecting {
background: rgba(6, 25, 52, 0.8);
border: 1px solid rgba(42, 87, 199, 0.5);
color: rgba(149, 196, 250, 0.7);
animation: pulse-connecting 1.5s infinite;
}
.status-connecting i {
color: rgba(149, 196, 250, 0.5);
}
@keyframes pulse-connecting {
0%, 100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(42, 87, 199, 0.4);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 6px rgba(42, 87, 199, 0);
}
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: rgba(6, 25, 52, 0.5);
}
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(42, 87, 199, 0.5);
border-radius: 3px;
}
@media (max-width: 768px) {
#chatModal {
width: auto;
max-width: calc(100% - 40px);
height: 500px;
}
.message {
max-width: 90%;
font-size: 13px;
}
#chatModal .chat-title-wrapper {
gap: 8px;
}
#chatModal .modal-title span {
font-size: 15px;
}
.status-badge {
padding: 3px 8px;
font-size: 9px;
}
}
@media (max-width: 576px) {
#chatModal .modal-title span {
display: none;
}
#chatModal {
height: 450px;
}
#chatModal .chat-title-wrapper {
justify-content: center;
}
}