/* Connected Community — окно чата Connected AI, метки сотрудника, проекты, приглашение к Connected AI, заглушка «Скоро».
   Часть оформления портала. Файлы подключаются в templates/index.html по порядку номеров: поздние правила перебивают ранние. */
/* =========================================================
   AI STAFF BOT — окно чата
   ========================================================= */
.body-row.chat-mode .side-widgets{display:none;}
.body-row.chat-mode{max-width:1000px;}
.body-row.chat-mode .main{padding:20px 0 20px;display:flex;flex-direction:column;min-height:0;}

.chat-shell{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
  height:calc(100vh - 150px);
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;
}

.chat-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  background:var(--orange-tint);
  flex-shrink:0;
}
.chat-topbar-left{display:flex;align-items:center;gap:11px;min-width:0;}
.chat-name{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:16px;}
.chat-status{font-size:12px;color:var(--ink-soft);margin-top:1px;}
.chat-new{padding:7px 14px;font-size:12.5px;flex-shrink:0;}

/* лента сообщений */
.chat-log{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:22px 20px;
  display:flex;flex-direction:column;gap:16px;
  background:var(--bg-soft);
  scroll-behavior:smooth;
}

.msg{display:flex;gap:10px;max-width:100%;}
.msg.user{justify-content:flex-end;}
.msg.bot{justify-content:flex-start;}
.msg-avatar{
  width:28px;height:28px;flex-shrink:0;
  border-radius:8px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;margin-top:2px;
}
.bubble{
  max-width:76%;
  padding:12px 15px;
  border-radius:13px;
  font-size:14.5px;line-height:1.6;
  word-wrap:break-word;overflow-wrap:anywhere;
}
.msg.user .bubble{
  background:var(--orange);color:#fff;
  border-bottom-right-radius:4px;
}
.bubble.bot{
  background:var(--surface);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.bubble.bot.error{
  border-color:var(--danger);
  color:var(--danger);
  background:#FFF6F4;
}
.bubble.bot.thinking{padding:14px 16px;}

/* пустое состояние */
.chat-empty{
  margin:auto;
  text-align:center;
  max-width:460px;
  padding:20px;
}
.chat-empty-mark{
  width:48px;height:48px;margin:0 auto 14px;
  border-radius:13px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;line-height:1;
}
.chat-empty-title{
  font-family:'Samsung Sans','Golos Text',sans-serif;
  font-weight:700;font-size:20px;margin-bottom:6px;
}
.chat-empty-sub{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:20px;}
.chat-empty .ask-examples{justify-content:center;}

/* поле ввода */
.chat-composer{
  display:flex;align-items:flex-end;gap:10px;
  padding:14px 16px 10px;
  border-top:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.chat-composer textarea{
  flex:1;min-width:0;
  font-family:'Samsung Sans','Roboto',sans-serif;font-size:14.5px;line-height:1.45;
  color:var(--ink);
  padding:11px 15px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--bg-soft);
  resize:none;overflow-y:auto;
  height:44px;
}
.chat-composer textarea:focus{outline:none;border-color:var(--orange);background:var(--surface);}
.chat-send{
  flex-shrink:0;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:11px;
  background:var(--orange);color:#fff;
  cursor:pointer;
}
.chat-send:hover{background:var(--orange-dark);}
.chat-send:disabled{opacity:0.45;cursor:default;}
.chat-hint{
  font-size:11.5px;color:var(--ink-soft);
  padding:0 18px 12px;background:var(--surface);
  flex-shrink:0;
}

@media (max-width:860px){
  .chat-shell{height:calc(100vh - 210px);}
  .bubble{max-width:88%;}
  .chat-hint{display:none;}
}

/* ---- метки сотрудника: выезд / онлайн ---- */
.person-tag{
  display:inline-block;margin-top:7px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.03em;
  padding:3px 9px;border-radius:999px;
}
.person-tag.field{background:var(--orange-soft);color:var(--orange-dark);}
.person-tag.online{background:#E7F1FF;color:#2A5FA8;}

/* ---- отделы: руководитель и компания на карточке ---- */
.person-card.is-head{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset;}
.person-tag.head{background:var(--orange);color:#fff;margin:0 0 8px;}
.person-company{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.field-check label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;}
.field-check input{width:16px;height:16px;accent-color:var(--orange);}

/* =========================================================
   ПРОЕКТЫ
   ========================================================= */
.project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.project-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;
  border-left:4px solid var(--border);
}
.project-card.active{border-left-color:var(--orange);}
.project-card.planned{border-left-color:#C9C4BC;}
.project-card.done{border-left-color:#7DBB8C;opacity:0.85;}
.project-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.project-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:15.5px;line-height:1.3;}
.project-status{flex-shrink:0;}
.project-status.active{background:var(--orange);color:#fff;}
.project-status.planned{background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--border);}
.project-status.done{background:#E6F4EA;color:#2E7D46;}
.project-client{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.project-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-soft);margin-top:10px;}
.project-meta .overdue{color:var(--danger);font-weight:600;}
.project-desc{font-size:13.5px;margin-top:10px;white-space:pre-wrap;line-height:1.5;}
.btn.text.accent{color:var(--orange-dark);}
.btn.text.accent:hover{color:var(--orange);}

/* ---- витрина проектов: крупные названия ---- */
.project-card{border-left:4px solid var(--orange);padding:20px 22px 16px;}
.project-title{font-size:22px;letter-spacing:-0.01em;line-height:1.2;}
.project-client{font-size:14px;margin-top:5px;}
.project-desc{margin-top:12px;font-size:14px;line-height:1.6;}

/* ---- приглашение к AI Staff Bot на главной ---- */
.ai-teaser{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:22px;
  border:1px solid var(--orange-soft);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--orange-tint) 0%,var(--surface) 70%);
  cursor:pointer;transition:border-color .15s, box-shadow .15s;
}
.ai-teaser:hover{border-color:var(--orange);box-shadow:0 4px 18px rgba(255,102,0,0.12);}
.ai-teaser-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 260px;}
.ai-teaser-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:16px;}
.ai-teaser-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
.ai-teaser-input{display:flex;gap:8px;flex:1 1 320px;max-width:460px;cursor:default;}
.ai-teaser-input input{
  flex:1;min-width:0;height:42px;
  padding:0 14px;font-family:'Samsung Sans','Roboto',sans-serif;font-size:14px;color:var(--ink);
  border:1px solid var(--border);border-radius:11px;background:var(--surface);
}
.ai-teaser-input input:focus{outline:none;border-color:var(--orange);}
.ai-teaser-input .chat-send{width:42px;height:42px;}
@media (max-width:860px){.ai-teaser-input{max-width:none;}}

/* ---- вариант приглашения для правой колонки: вертикальный ---- */
.ai-teaser.side{
  flex-direction:column;align-items:stretch;gap:14px;
  margin:0;padding:18px 18px 16px;
  background:linear-gradient(180deg,var(--orange-tint) 0%,var(--surface) 75%);
}
.ai-teaser.side .ai-teaser-left{flex:none;align-items:flex-start;}
.ai-teaser.side .ask-spark{margin-top:1px;}
.ai-teaser.side .ai-teaser-input{flex:none;max-width:none;}

/* ---- заглушка «скоро» (Мессенджер) ---- */
.soon-card{
  border:1px dashed var(--border);border-radius:var(--radius);
  background:var(--bg-soft);
  padding:56px 28px;text-align:center;
  max-width:560px;margin:0 auto;
}
.soon-mark{font-size:44px;line-height:1;margin-bottom:16px;}
.soon-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:22px;margin-bottom:10px;}
.soon-text{font-size:14.5px;line-height:1.6;color:var(--ink);max-width:44ch;margin:0 auto;}
.soon-hint{font-size:13px;color:var(--ink-soft);margin-top:18px;line-height:1.5;}
.soon-hint a{font-weight:600;}

/* ---- кнопка-карточка «Частые вопросы» в разделе для новичков ---- */
.faq-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:32px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.faq-link:hover{border-color:var(--orange);box-shadow:0 4px 18px rgba(255,102,0,0.10);}
.faq-link-left{display:flex;align-items:center;gap:14px;min-width:0;}
.faq-link-mark{
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:22px;
}
.faq-link-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:16.5px;}
.faq-link-sub{font-size:13px;color:var(--ink-soft);margin-top:2px;}
/* кнопка «назад» на вложенных страницах (Частые вопросы, форма заявки, страница проекта, игра) — одна на весь сайт,
   заметная плашка, а не серая строчка: раньше её не находили */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--orange-dark);text-decoration:none;
  margin-bottom:10px;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid var(--orange);background:var(--orange-tint);
  transition:background .12s,color .12s,transform .12s;}
.back-link:hover{background:var(--orange);color:#fff;transform:translateX(-2px);}
html[data-theme="dark"] .back-link{background:transparent;color:var(--orange);}
html[data-theme="dark"] .back-link:hover{background:var(--orange);color:#fff;}