/* Azimuth: система макетов. Заморожена 30.09, CDO. Токены из стеклянного компаса:
   фон это тёмно-синий фон маскота, акцент это тёплый свет лампы внутри стекла. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600&family=Golos+Text:wght@400;500;600&display=swap');
:root{
  --noch:#0A0F24;      /* Ночь: фон страницы */
  --glub:#121A38;      /* Глубина: панели */
  --podem:#1B2548;     /* Подъём: сообщения Тахира, наведение */
  --shov:#27325A;      /* Шов: линии, не текст */
  --kost:#F1EBDD;      /* Кость: основной текст, 14.36 к Глубине */
  --tuman:#9AA3C2;     /* Туман: вторичный текст, 6.82 к Глубине */
  --lampa:#F2B35B;     /* Лампа: ЕДИНСТВЕННЫЙ акцент. Кнопка действия, активная роль, «работает» */
  --signal:#F0555A;    /* Сигнал: текст «застряло» и подписи опасного, 5.0 к Глубине */
  --tormoz:#B8262B;    /* Тормоз: заливка кнопки остановки, кость на нём 5.27 */
  --r:10px;
  --disp:'Unbounded',sans-serif; --ui:'Golos Text',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--noch);color:var(--kost);font:15px/1.5 var(--ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-rows:56px 1fr;height:100vh}
/* верхняя полоса */
.top{display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid var(--shov);background:var(--noch)}
.mark{font:600 17px var(--disp);letter-spacing:.02em}
.limits{display:flex;gap:22px;margin-left:12px;color:var(--tuman);font-size:13px}
.limits b{color:var(--kost);font-weight:500}
.lim{display:flex;align-items:center;gap:8px}
.bar{width:64px;height:4px;border-radius:2px;background:var(--shov);overflow:hidden}
.bar i{display:block;height:100%;background:var(--kost)}
.stamp{color:var(--tuman);font-size:12px}
.sp{flex:1}
.btn{font:500 14px var(--ui);border-radius:8px;padding:8px 14px;border:1px solid var(--shov);background:var(--glub);color:var(--kost);display:inline-flex;gap:8px;align-items:center}
.btn .n{background:var(--lampa);color:var(--noch);border-radius:10px;padding:0 7px;font-weight:600;font-size:12px}
.stop{background:var(--tormoz);border-color:var(--tormoz);color:var(--kost)}
.go{background:var(--lampa);border-color:var(--lampa);color:var(--noch)}
/* колонка ролей */
.body{display:grid;grid-template-columns:268px 1fr;min-height:0}
.body.three{grid-template-columns:268px 1fr 440px}
.roles{border-right:1px solid var(--shov);padding:14px 12px;overflow:hidden;background:var(--noch)}
.grp{color:var(--tuman);font-size:12px;margin:10px 8px 5px}
.grp:first-child{margin-top:0}
.role{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:6px 10px;margin-bottom:3px;border-radius:8px;background:var(--glub);border:1px solid transparent}
.role .nm{font-weight:500}
.role .st{font-size:12px;color:var(--tuman);display:flex;align-items:center;gap:6px;white-space:nowrap}
.role.on{border-color:var(--lampa);background:var(--podem)}
/* метки: форма различает, цвет помогает */
.dot{width:8px;height:8px;border-radius:50%}
.m-work .dot{background:var(--lampa);box-shadow:0 0 0 3px rgba(242,179,91,.18)}
.m-work{color:var(--kost)!important}
.m-unread .cnt{background:var(--kost);color:var(--noch);border-radius:9px;padding:0 6px;font-weight:600;font-size:11px}
.m-quiet .dot{border:1.5px solid var(--tuman);background:transparent}
/* чат */
.chat{display:grid;grid-template-rows:auto 1fr auto;min-height:0;background:var(--noch)}
.chead{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--shov)}
.chead img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 24px rgba(242,179,91,.28)}
.chead .t{font:600 16px var(--disp)}
.chead .s{font-size:13px;color:var(--tuman);display:flex;align-items:center;gap:6px}
.feed{padding:22px 28px;overflow:hidden;display:flex;flex-direction:column;gap:16px}
.col{max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.sum{border:1px solid var(--shov);border-radius:var(--r);background:var(--glub);padding:16px 18px}
.sum h3{font:500 13px var(--ui);color:var(--tuman);margin-bottom:10px;display:flex;justify-content:space-between}
.row{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--shov)}
.row:first-of-type{border-top:0}
.row .k{font-weight:600}
.row .k.wait{color:var(--lampa)} .row .k.stuck{color:var(--signal)}
.row .v{color:var(--kost)} .row .v small{color:var(--tuman);font-size:13px}
.msg{max-width:78%;padding:11px 15px;border-radius:12px;line-height:1.55}
.msg.me{align-self:flex-end;background:var(--podem)}
.msg.az{align-self:flex-start;background:transparent;border:1px solid var(--shov)}
.msg .meta{display:block;font-size:12px;color:var(--tuman);margin-top:6px}
.copy{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tuman);margin-top:6px;justify-content:flex-end}
.copy img{width:16px;height:16px;border-radius:50%}
.compose{padding:16px 28px 22px;border-top:1px solid var(--shov)}
.field{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--glub);border:1px solid var(--shov);border-radius:12px;padding:10px 10px 10px 16px}
.field span{flex:1;color:var(--tuman)}
.ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--podem);color:var(--kost)}
.ico.hot{background:var(--lampa);color:var(--noch)}
/* панель роли */
.rpanel{border-left:1px solid var(--shov);display:grid;grid-template-rows:auto 1fr auto;min-height:0;background:var(--glub)}
.rpanel .chead{background:var(--glub)}
/* затемнение и окна */
.veil{position:fixed;inset:0;background:rgba(5,8,20,.72);display:grid;place-items:center}
.dlg{width:560px;background:var(--glub);border:1px solid var(--shov);border-radius:14px;padding:22px 24px}
.dlg h2{font:600 18px var(--disp);margin-bottom:6px}
.dlg p{color:var(--tuman);font-size:14px}
.item{border-top:1px solid var(--shov);padding:14px 0;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.item .who{font-size:12px;color:var(--tuman)}
.item .what{font-weight:500;margin:2px 0}
.item .sum2{font-size:13px;color:var(--tuman)}
.pair{display:flex;gap:8px}
.halt{background:rgba(184,38,43,.14);border-bottom:1px solid var(--tormoz);color:var(--kost);padding:10px 20px;font-size:14px;display:flex;gap:10px;align-items:center}
.cap{position:fixed;left:16px;bottom:10px;font-size:11px;color:var(--tuman);opacity:.8}

.sum.stack .row{grid-template-columns:1fr;gap:2px}
.cap{left:auto;right:16px;bottom:4px}