/* Widget chatbot DYNSEO — styles */
:root {
  --oe-blue: #1B3C87;
  --oe-bl: #2563EB;
  --oe-gray: #F3F4F6;
  --oe-border: #E5E7EB;
  --oe-txt: #111827;
  --oe-mu: #6B7280;
}

.oe-fab {
  position: fixed; right: 20px; bottom: 20px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--oe-blue); border: none; cursor: pointer;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(27, 60, 135, .35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s; padding: 0;
}
.oe-fab:hover { transform: scale(1.07); }
.oe-fab svg { width: 28px; height: 28px; fill: #fff; }

.oe-dot {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; background: #EF4444;
  border-radius: 50%; border: 2px solid #fff; display: none;
}
.oe-dot.show { display: block; }

.oe-panel {
  position: fixed; right: 20px; bottom: 92px;
  width: 75vw; max-width: calc(100vw - 40px); min-width: 400px;
  height: 75vh; max-height: calc(100vh - 110px); min-height: 520px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
  display: none; flex-direction: column; overflow: hidden;
  z-index: 99998; border: 1px solid var(--oe-border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.oe-panel.open { display: flex; }

@media (max-width: 900px) {
  .oe-panel { width: calc(100vw - 40px); min-width: 0; }
}
@media (max-width: 480px) {
  .oe-panel {
    right: 0; bottom: 0;
    width: 100vw; max-width: 100vw; min-width: 0;
    height: 100dvh; max-height: 100dvh; min-height: 0;
    border-radius: 0;
  }
}

.oe-head {
  background: linear-gradient(135deg, var(--oe-blue), var(--oe-bl));
  padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.oe-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.oe-hn { color: #fff; font-weight: 700; font-size: 15px; margin: 0; }
.oe-hs { color: rgba(255, 255, 255, .85); font-size: 11px; margin: 0; }
.oe-ha { display: flex; gap: 4px; }
.oe-hb {
  background: rgba(255, 255, 255, .15); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.oe-hb:hover { background: rgba(255, 255, 255, .28); }

.oe-strip {
  padding: 8px 16px; font-size: 12px;
  background: #F8FAFC; border-bottom: 1px solid var(--oe-border);
  color: var(--oe-mu); display: none;
}
.oe-strip.course, .oe-strip.technical { display: block; }
.oe-strip.course { background: #EFF6FF; color: #1D4ED8; }
.oe-strip.technical { background: #FEF3C7; color: #92400E; }

.oe-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; background: #FAFBFC;
}
.oe-row { display: flex; }
.oe-row.usr { justify-content: flex-end; }
.oe-row.bot { justify-content: flex-start; }
.oe-bub {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.oe-row.usr .oe-bub {
  background: var(--oe-blue); color: #fff; border-bottom-right-radius: 4px;
}
.oe-row.bot .oe-bub {
  background: #fff; color: var(--oe-txt);
  border: 1px solid var(--oe-border); border-bottom-left-radius: 4px;
}

.oe-typ { display: flex; gap: 4px; padding: 4px 0; }
.oe-typ span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--oe-mu); animation: oeBounce 1.4s infinite ease-in-out;
}
.oe-typ span:nth-child(2) { animation-delay: .2s; }
.oe-typ span:nth-child(3) { animation-delay: .4s; }
@keyframes oeBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.oe-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px; border-top: 1px solid var(--oe-border); background: #fff;
}
.oe-chip {
  background: var(--oe-gray); border: 1px solid var(--oe-border);
  border-radius: 16px; padding: 6px 12px; font-size: 12px;
  cursor: pointer; transition: all .15s; color: var(--oe-txt);
}
.oe-chip:hover {
  background: var(--oe-blue); color: #fff; border-color: var(--oe-blue);
}

.oe-form {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--oe-border); background: #fff;
  align-items: flex-end; flex-shrink: 0;
}
.oe-inp {
  flex: 1; border: 1px solid var(--oe-border); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; resize: none; max-height: 80px;
  font-family: inherit; outline: none; transition: border-color .15s;
}
.oe-inp:focus { border-color: var(--oe-blue); }
.oe-send {
  background: var(--oe-blue); color: #fff; border: none;
  border-radius: 12px; padding: 10px 16px; font-weight: 600;
  cursor: pointer; font-size: 14px; transition: background .15s;
}
.oe-send:hover:not(:disabled) { background: var(--oe-bl); }
.oe-send:disabled { opacity: .5; cursor: not-allowed; }

.oe-esc-bub { background: #FEF3C7 !important; border-color: #FCD34D !important; }
.oe-esc-btn {
  border: none; border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s;
  font-family: inherit;
}
.oe-esc-btn:hover { opacity: .85; }
.oe-esc-btn-yes { background: var(--oe-blue); color: #fff; }
.oe-esc-btn-no { background: var(--oe-gray); color: var(--oe-txt); }

.oe-mail-input {
  width: 100%; border: 1px solid var(--oe-border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; margin-top: 4px;
  font-family: inherit; outline: none; box-sizing: border-box;
}
.oe-mail-input.error { border-color: #DC2626; }
.oe-mail-input:focus { border-color: var(--oe-blue); }