/* Virogram 2.0 theme for Aigency / aiteam.virogram.ru */

:root {
  --viro-sky: #0ea5e9;
  --viro-sky-dark: #0284c7;
  --viro-cyan: #00e5ff;
  --viro-purple: #8e24aa;
  --viro-green: #00b48a;
  --viro-page: #030408;
  --viro-surface: #0f121c;
  --viro-surface-elevated: #151a28;
  --viro-text: #f8fafc;
  --viro-text-muted: #94a3b8;
  --viro-border: rgba(255, 255, 255, 0.08);
}

body {
  font-family: 'Plus Jakarta Sans', 'Manrope', 'Nunito Sans', sans-serif !important;
  background: var(--viro-page) !important;
  background-image:
    radial-gradient(circle at 5% 15%, rgba(142, 36, 170, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 95% 85%, rgba(0, 229, 255, 0.08) 0%, transparent 40%) !important;
  background-attachment: fixed !important;
  color: var(--viro-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif !important;
  color: var(--viro-text) !important;
}

header {
  background: linear-gradient(180deg, #0b0d14 0%, #0f121c 100%) !important;
  border-bottom: 1px solid var(--viro-border) !important;
  padding: 12px 0 !important;
}

header .primary-menu li a,
header .primary-menu li a:hover {
  color: var(--viro-text-muted) !important;
}

header .primary-menu li a:hover {
  color: var(--viro-sky) !important;
}

.btn-primary,
.start-chat,
#hero .btn {
  background: linear-gradient(135deg, var(--viro-sky) 0%, var(--viro-sky-dark) 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}

.btn-primary:hover,
.start-chat:hover,
#hero .btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35) !important;
}

.default-title,
.ai-contacts-top strong {
  color: var(--viro-sky) !important;
}

#hero {
  background: transparent !important;
  min-height: auto !important;
}

#hero h1 span,
.color-purple {
  color: var(--viro-cyan) !important;
}

.card-ai {
  background: var(--viro-surface) !important;
  border: 1px solid var(--viro-border) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-ai:hover {
  border-color: rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.card-ai-body h3,
.card-ai-body p,
.ai-contacts-name,
.ai-contacts-top span {
  color: var(--viro-text) !important;
}

.card-ai-body p,
.ai-contacts-top span {
  color: var(--viro-text-muted) !important;
}

/* ─── Chat UI ─── */
.chat-background {
  background: var(--viro-surface) !important;
  border: 1px solid var(--viro-border) !important;
  border-radius: 16px !important;
}

.ai-contacts-top,
.ai-chat-top {
  background: var(--viro-surface-elevated) !important;
  border-bottom: 1px solid var(--viro-border) !important;
}

.ai-contacts-item {
  border-bottom: 1px solid var(--viro-border) !important;
}

.ai-contacts-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.ai-contacts-item-active,
.ai-contacts-item-active:hover {
  background: rgba(14, 165, 233, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--viro-sky);
}

.chat-frame {
  background: var(--viro-page) !important;
}

.message-container .message-text {
  background: var(--viro-surface-elevated) !important;
  color: var(--viro-text) !important;
  border-radius: 14px !important;
}

.thread-user .message-container .message-text {
  background: rgba(14, 165, 233, 0.18) !important;
  color: var(--viro-text) !important;
}

.message-area-bottom,
.chat-input textarea,
.chat-input input {
  background: var(--viro-surface-elevated) !important;
  border-color: var(--viro-border) !important;
  color: var(--viro-text) !important;
}

.btn-send-chat {
  background: var(--viro-sky) !important;
  border-radius: 12px !important;
}

.btn-send-chat:hover {
  background: var(--viro-sky-dark) !important;
}

#inner-page {
  background: transparent !important;
}

#inner-page h1,
#inner-page h3 {
  color: var(--viro-text) !important;
}

footer {
  background: linear-gradient(180deg, #0b0d14 0%, #0f121c 100%) !important;
  border-top: 1px solid var(--viro-border);
}

footer ul li,
footer ul li a,
footer p {
  color: var(--viro-text-muted) !important;
}

/* Embed mode — clean chat inside Virogram iframe */
body.bg-white.embed-virogram,
body.embed-virogram {
  background: var(--viro-page) !important;
  margin: 0 !important;
}

body.embed-virogram .chat-background {
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 100vh;
}

body.embed-virogram .col-main-chat {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.embed-virogram .ai-contacts-scroll,
body.embed-virogram .d-none.d-lg-block.col-lg-4 {
  display: none !important;
}

body.embed-virogram .wrapper-ai-chat-top {
  background: linear-gradient(90deg, #0b0d14 0%, #0f121c 100%) !important;
  border-bottom: 1px solid var(--viro-border);
}

body.embed-virogram .ai-chat-top-name h4 {
  color: var(--viro-text) !important;
}

body.embed-virogram .ai-chat-top-job {
  color: var(--viro-text-muted) !important;
}

/* Full chat UI inside Virogram iframe — hide duplicate header, show messages + input */
body.embed-virogram .ai-chat-top {
  display: none !important;
}

body.embed-virogram #chat-background {
  background: #0f121c !important;
  min-height: 100vh !important;
  padding: 0 !important;
}

body.embed-virogram #chat-background > .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.embed-virogram .chat-background {
  min-height: 100vh !important;
  margin: 0 !important;
}

body.embed-virogram .col-main-chat {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body.embed-virogram .ia-chat-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.embed-virogram .chat-frame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.embed-virogram #overflow-chat {
  padding: 12px 14px !important;
}

body.embed-virogram .message-text,
body.embed-virogram .chat-response,
body.embed-virogram .user-name h5,
body.embed-virogram .date-chat {
  color: #f8fafc !important;
}

body.embed-virogram .message-area-bottom {
  display: block !important;
  flex-shrink: 0 !important;
  background: #0b0d14 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
}

body.embed-virogram .chat-input textarea,
body.embed-virogram #chat {
  background: #1a1f2e !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}

body.embed-virogram .btn-send-chat {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  border: 0 !important;
}

body.embed-virogram .cookie-consent,
body.embed-virogram footer,
body.embed-virogram .modal-backdrop {
  display: none !important;
}

.virogram-embed-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(90deg, #0ea5e9, #0284c7);
  color: #fff;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.25);
}

.virogram-embed-bar__back {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.virogram-embed-bar__title {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 48px;
}