:root {
--of-ai:    #2B7BE8;
--of-ai2:   #1A5FBB;
--of-bg:    #F4F7FB;
--of-text:  #1E2235;
--of-sh:    0 8px 32px rgba(0,0,0,0.16);
}
/* ── Кнопка (строго над существующим чатом) ── */
#of-chat-btn {
position: fixed;
bottom: 80px;
right: 20px;
z-index: 99999;
width: 50px; height: 50px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #7ec0ff, #4d9fe8 50%, #2B6FBB);
background-size: 200% 200%;
border: none; cursor: pointer;
box-shadow: 0 4px 20px rgba(43,123,232,0.4);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 1px;
outline: none;
animation: of-breathe 3s ease-in-out infinite;
}
@keyframes of-breathe {
0%   { box-shadow: 0 4px 20px rgba(43,123,232,0.3), 0 0 0 0 rgba(91,168,255,0.0); background-position: 0% 0%; }
50%  { box-shadow: 0 6px 28px rgba(43,123,232,0.6), 0 0 18px 4px rgba(91,168,255,0.3); background-position: 100% 100%; }
100% { box-shadow: 0 4px 20px rgba(43,123,232,0.3), 0 0 0 0 rgba(91,168,255,0.0); background-position: 0% 0%; }
}
#of-chat-btn .of-star,
#of-chat-btn .of-ai-text,
#of-chat-btn .of-badge { position: relative; z-index: 1; }
#of-chat-btn:hover {
animation: none;
transform: scale(1.08);
box-shadow: 0 8px 32px rgba(43,123,232,0.5), 0 0 22px 6px rgba(91,168,255,0.3);
}
/* Звёздочка */
#of-chat-btn .of-star { color: #fff; font-size: 11px; line-height: 1; opacity: 0.85; }
/* AI текст */
#of-chat-btn .of-ai-text {
color: #fff; font-size: 13px; font-weight: 800;
font-family: Arial, sans-serif; line-height: 1; letter-spacing: -0.5px;
}
#of-chat-btn .of-badge {
position: absolute; top: -2px; right: -2px;
width: 12px; height: 12px;
background: #34C759; border-radius: 50%; border: 2px solid #fff;
}
/* ── Окно ── */
#of-chat-window {
position: fixed;
bottom: 142px;
right: 20px;
z-index: 99998;
width: 340px; max-height: 520px;
display: flex; flex-direction: column;
background: #fff; border-radius: 14px;
box-shadow: var(--of-sh); overflow: hidden;
transform: scale(0.88) translateY(16px);
opacity: 0; pointer-events: none;
transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.22s;
}
#of-chat-window.of-open {
transform: scale(1) translateY(0);
opacity: 1; pointer-events: all;
}
/* ── Шапка ── */
.of-header {
background: linear-gradient(135deg, var(--of-ai), var(--of-ai2));
padding: 12px 14px;
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.of-header-icon {
width: 36px; height: 36px;
background: rgba(255,255,255,0.18); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 18px;
}
.of-header-text { flex: 1; }
.of-header-title {
color: #fff; font-weight: 700; font-size: 13.5px;
font-family: sans-serif; display: flex; align-items: center; gap: 5px;
}
.of-ai-badge {
background: rgba(255,255,255,0.22); color: #fff;
font-size: 9px; font-weight: 800; padding: 2px 5px;
border-radius: 4px; font-family: sans-serif; letter-spacing: 0.3px;
}
.of-header-sub { color: rgba(255,255,255,0.78); font-size: 11px; font-family: sans-serif; }
.of-close-btn {
background: none; border: none; cursor: pointer; padding: 4px;
color: rgba(255,255,255,0.75); font-size: 17px; line-height: 1;
}
.of-close-btn:hover { color: #fff; }
/* ── Сообщения ── */
.of-messages {
flex: 1; overflow-y: auto;
padding: 12px; background: var(--of-bg);
display: flex; flex-direction: column; gap: 8px;
}
.of-messages::-webkit-scrollbar { width: 4px; }
.of-messages::-webkit-scrollbar-thumb { background: #ccd; border-radius: 4px; }
.of-bubble {
max-width: 84%; padding: 9px 12px; border-radius: 15px;
font-size: 13px; line-height: 1.5; font-family: sans-serif;
color: var(--of-text); word-break: break-word;
}
.of-bubble.of-bot {
background: #fff; border: 1px solid #dde4f0;
align-self: flex-start; border-bottom-left-radius: 4px;
}
.of-bubble.of-user {
background: var(--of-ai); color: #fff;
align-self: flex-end; border-bottom-right-radius: 4px;
}
/* ── Кнопки выбора ── */
.of-choices {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 4px; align-self: flex-start; max-width: 90%;
}
.of-choice-btn {
background: #fff; border: 1.5px solid var(--of-ai);
color: var(--of-ai); border-radius: 20px;
padding: 6px 12px; font-size: 12.5px; font-family: sans-serif;
cursor: pointer; transition: background 0.15s, color 0.15s;
line-height: 1.3;
}
.of-choice-btn:hover { background: var(--of-ai); color: #fff; }
.of-choice-btn.of-used { opacity: 0.45; pointer-events: none; }
/* typing */
.of-typing { display: flex; gap: 4px; align-items: center; padding: 11px 12px; }
.of-typing span {
width: 7px; height: 7px; background: #a0b0cc;
border-radius: 50%; animation: of-b 1.2s infinite;
}
.of-typing span:nth-child(2) { animation-delay: .2s; }
.of-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes of-b { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
/* ── Ввод ── */
.of-input-area {
display: flex; align-items: flex-end; gap: 8px;
padding: 9px 11px; background: #fff;
border-top: 1px solid #e4ecf7; flex-shrink: 0;
}
#of-input {
flex: 1; border: 1px solid #d0daf0; border-radius: 18px;
padding: 8px 13px; font-size: 13px; font-family: sans-serif;
resize: none; outline: none; max-height: 90px; overflow-y: auto;
line-height: 1.4; color: var(--of-text); background: var(--of-bg);
transition: border-color 0.15s;
}
#of-input:focus { border-color: var(--of-ai); }
#of-send-btn {
width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
background: var(--of-ai);
border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, transform 0.1s;
}
#of-send-btn:hover { background: var(--of-ai2); }
#of-send-btn:active { transform: scale(0.93); }
#of-send-btn svg { width: 20px; height: 20px; fill: #ffffff !important; display: block; }
#of-send-btn:disabled { background: #bcc; cursor: default; }
.of-footer {
text-align: center; padding: 4px 0 7px;
font-size: 10px; color: #9aaac0; font-family: sans-serif; background: #fff; flex-shrink: 0;
}
@media (max-width: 480px) {
#of-chat-window { right:0;left:0;bottom:110px;width:100%;border-radius:14px 14px 0 0;max-height:75vh; }
#of-chat-btn { bottom:75px;right:15px; }
}

.of-links {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 6px; align-self: flex-start; max-width: 92%;
}
.of-link-btn {
display: inline-flex; align-items: center; gap: 6px;
background: #EEF4FF; border: 1px solid #CBDEFB; color: #1F5FBF;
border-radius: 14px; padding: 7px 11px;
font-size: 12.5px; font-family: sans-serif; line-height: 1.25;
text-decoration: none; transition: background .15s, border-color .15s;
}
.of-link-btn:hover { background: #E2ECFF; border-color: #A9C8F6; }
.of-link-arrow { font-size: 12px; opacity: .7; }