:root{--cfd-accent:#39c9ff}
#cf-dirij{position:fixed;bottom:20px;right:20px;width:78px;cursor:grab;user-select:none;z-index:9998;
  filter:drop-shadow(0 8px 16px #000a);touch-action:none}
#cf-dirij.cfd-drag{cursor:grabbing}
#cf-dirij img{width:100%;display:block;pointer-events:none}
#cf-dirij canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
/* Размер задаёт JS (place() из localStorage), не CSS: max-height дралась бы с ресайзом,
   а высота по контенту приводила к тому, что панель уезжала за низ экрана. */
#cf-chat{position:fixed;width:460px;height:560px;background:#161b22;border:1px solid #2a323d;
  border-radius:16px;box-shadow:0 18px 50px #000b;display:none;flex-direction:column;overflow:hidden;
  z-index:9999;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;color:#c9d4e0;min-width:280px;min-height:240px}
#cf-chat.cfd-rz{user-select:none}
#cf-chat.cfd-open{display:flex}
#cf-chat .h{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #2a323d;background:#12171e}
#cf-chat .av{width:30px;height:30px;border-radius:9px;background:#04121a;border:1px solid #2a323d;overflow:hidden;flex:0 0 auto}
#cf-chat .av canvas{width:100%;height:100%}
#cf-chat .tt{font-size:13px;font-weight:700;color:#eaf3fb}
#cf-chat .sb{font-size:10px;opacity:.6;margin-top:1px}
#cf-chat .dot{width:7px;height:7px;border-radius:50%;background:#54e07a;box-shadow:0 0 8px #54e07a;margin-left:auto}
#cf-chat .x{background:none;border:none;color:#c9d4e0;opacity:.5;font-size:18px;cursor:pointer}
#cf-chat .x:hover{opacity:1}
#cf-chat .body{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1}
#cf-chat .m{max-width:82%;font-size:12.5px;line-height:1.5;padding:8px 11px;border-radius:13px;white-space:pre-wrap;word-wrap:break-word}
#cf-chat .m.bot{align-self:flex-start;background:#1b222c;border:1px solid #2a323d;border-bottom-left-radius:4px}
#cf-chat .m.me{align-self:flex-end;background:var(--cfd-accent);color:#04121a;font-weight:500;border-bottom-right-radius:4px}
#cf-chat .tp{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#1b222c;border:1px solid #2a323d;border-radius:13px}
#cf-chat .tp i{width:6px;height:6px;border-radius:50%;background:var(--cfd-accent);opacity:.4;animation:cfdtp 1s infinite}
#cf-chat .tp i:nth-child(2){animation-delay:.2s}#cf-chat .tp i:nth-child(3){animation-delay:.4s}
@keyframes cfdtp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* align-items:flex-end — кнопки держат свои 38px и прижаты к низу, когда поле
   растёт под текст. Без этого flex растягивал их по высоте всего ряда. */
#cf-chat .inp{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid #2a323d;background:#12171e}
/* Поле ввода растёт под текст: одна строка по умолчанию, дальше до 7 строк,
   потом свой скролл. Фиксированные 38px не давали увидеть, что пишешь. */
#cf-chat textarea{flex:1;resize:none;height:38px;min-height:38px;max-height:154px;overflow-y:auto;background:#0f141a;border:1px solid #2a323d;border-radius:10px;
  color:#c9d4e0;font:inherit;font-size:12.5px;padding:9px 11px;outline:none}
#cf-chat textarea:focus{border-color:var(--cfd-accent)}
#cf-chat .send{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:10px;background:var(--cfd-accent);color:#04121a;font-size:16px;cursor:pointer;font-weight:700}

/* Микрофон: Web Speech API, распознаёт браузер. Во время записи пульсирует красным. */
#cf-chat .mic{width:38px;height:38px;flex:0 0 auto;border:1px solid #2a323d;border-radius:10px;background:#0f141a;
  color:#c9d4e0;font-size:15px;cursor:pointer;line-height:1;padding:0}
#cf-chat .mic:hover{border-color:var(--cfd-accent)}
#cf-chat .mic.cfd-rec{background:#ff4d4d;border-color:#ff4d4d;color:#fff;animation:cfdrec 1.1s infinite}
@keyframes cfdrec{0%,100%{box-shadow:0 0 0 0 #ff4d4d88}70%{box-shadow:0 0 0 7px #ff4d4d00}}

/* Уголок ресайза: левый-нижний, потому что панель прижата к правому краю рядом с роботом.
   Двойной клик по нему возвращает размер по умолчанию. */
#cf-chat .rz{position:absolute;left:0;bottom:0;width:18px;height:18px;cursor:nesw-resize;
  touch-action:none;z-index:2}
#cf-chat .rz::before{content:'';position:absolute;left:4px;bottom:4px;width:8px;height:8px;
  border-left:2px solid #4a5563;border-bottom:2px solid #4a5563;border-bottom-left-radius:3px}
#cf-chat .rz:hover::before{border-color:var(--cfd-accent)}