/* =============================================================================
   office.css — стартовая панель раздела «Мой офис» (дашборд WEWO).

   Живёт ВНУТРИ приложения (index.html), под общей шапкой. Всё замкнуто на
   #officeHome, чтобы стили не текли в остальной сайт. Цвета — только из
   theme.css, своих оттенков не вводим.

   Структура:
     1. Корень панели, фон и свечение
     2. Стекло и каркас в две колонки
     3. Знак-шестиугольник (общий компонент)
     4. Левая колонка: задачи и пользователь
     5. Правая колонка: приветствие и плитки
     6. Нижняя панель: ввод, выбор специалиста, отправка
     7. Адаптив
   ============================================================================= */

/* ---------- 1. Корень ---------- */

/* Высоту считаем от вьюпорта минус sticky-шапка (~74px). Панель тёмная,
   поэтому светлый фон body.view-office сюда не просвечивает. */
#officeHome {
  --topbar-h: 78px;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--wv-bg);
  color: var(--wv-text);
  font-family: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* Когда открыт дашборд — гасим светлый фон body, чтобы края были тёмными. */
body.office-dark { background: var(--wv-bg); }

#officeHome * { box-sizing: border-box; }
#officeHome .of-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Фиолетовое свечение из правого верхнего угла, растворяется в фоне.
   Внутри панели — absolute, а не fixed, чтобы не перекрывать остальной сайт. */
#officeHome .of-ambient {
  position: absolute;
  top: -30%;
  right: -14%;
  width: 70%;
  height: 90%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(48% 48% at 62% 38%, rgba(168, 85, 247, .40), transparent 70%),
    radial-gradient(60% 60% at 78% 22%, rgba(77, 166, 255, .22), transparent 72%);
  filter: blur(40px);
}
#officeHome .of-ambient::after {
  content: "";
  position: absolute;
  left: -40%;
  bottom: -120%;
  width: 90%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(77, 166, 255, .12), transparent 70%);
  filter: blur(50px);
}

/* ---------- 2. Каркас ---------- */

#officeHome .of-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 30%) 1fr;
  gap: 18px;
  height: calc(100vh - var(--topbar-h));
  padding: 18px;
}

#officeHome .of-glass {
  background: linear-gradient(180deg, rgba(18, 19, 31, .82), rgba(18, 19, 31, .62));
  border: 1px solid var(--wv-line);
  border-radius: var(--wv-r);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---------- 3. Знак-шестиугольник ---------- */

#officeHome .of-hex {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hs, 40px);
  height: var(--hs, 40px);
}
#officeHome .of-hex-sm { --hs: 40px; }
#officeHome .of-hex-md { --hs: 46px; }
#officeHome .of-hex-lg { --hs: 82px; }

#officeHome .of-hex-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(77, 166, 255, .28));
}
#officeHome .of-hex-bg use {
  fill: url(#ofGradSoft);
  stroke: url(#ofGrad);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

#officeHome .of-hex-i {
  position: relative;
  width: 44%;
  height: 44%;
  color: #E6ECFF;
  filter: drop-shadow(0 0 8px rgba(77, 166, 255, .55))
          drop-shadow(0 0 16px rgba(168, 85, 247, .35));
}
#officeHome .of-hex-i-hex { width: 100%; height: 100%; }
#officeHome .of-hex-i-hex use { fill: none; stroke: url(#ofGrad); stroke-width: 1.6; stroke-linejoin: round; }

#officeHome .of-hex-w { position: relative; width: 100%; height: 100%; }
#officeHome .of-hex-w text {
  font-family: "Onest", sans-serif;
  font-size: 8.4px;
  font-weight: 800;
  letter-spacing: .3px;
  fill: var(--wv-text);
}

#officeHome .of-i { width: 20px; height: 20px; flex: none; }

/* ---------- 4. Левая колонка ---------- */

#officeHome .of-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 22px;
  gap: 18px;
}

#officeHome .of-newtask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--wv-grad);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(77, 166, 255, .28), 0 0 40px rgba(168, 85, 247, .22),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--wv-e), box-shadow .2s var(--wv-e), filter .2s var(--wv-e);
}
#officeHome .of-newtask:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 38px rgba(77, 166, 255, .36), 0 0 56px rgba(168, 85, 247, .3),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
#officeHome .of-newtask:active { transform: translateY(0); }

#officeHome .of-tasks {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
#officeHome .of-tasks::-webkit-scrollbar { width: 6px; }
#officeHome .of-tasks::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 999px; }

#officeHome .of-task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--wv-line);
  border-radius: var(--wv-r-2);
  background: rgba(25, 26, 40, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--wv-text);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s var(--wv-e), background .2s var(--wv-e), transform .2s var(--wv-e);
}
#officeHome .of-task:hover { border-color: var(--wv-line-2); background: rgba(30, 31, 48, .7); }

#officeHome .of-task.is-active {
  background: rgba(30, 32, 52, .75);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(77, 166, 255, .22), 0 10px 34px rgba(77, 166, 255, .18),
              0 0 44px rgba(168, 85, 247, .14);
}
#officeHome .of-task.is-active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--wv-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

#officeHome .of-task-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#officeHome .of-task-t {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--wv-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#officeHome .of-task-s { font-size: 13px; color: var(--wv-mute); }

#officeHome .of-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--wv-line);
}
#officeHome .of-user-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#officeHome .of-user-n {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#officeHome .of-user-s { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wv-ok); }
#officeHome .of-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wv-ok);
  box-shadow: 0 0 10px rgba(45, 212, 191, .8);
}

#officeHome .of-gear {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--wv-mute);
  cursor: pointer;
  transition: color .2s var(--wv-e), border-color .2s var(--wv-e), background .2s var(--wv-e);
}
#officeHome .of-gear:hover { color: var(--wv-text); border-color: var(--wv-line); background: rgba(255, 255, 255, .04); }

/* ---------- 5. Правая колонка ---------- */

#officeHome .of-main {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 46px 48px 22px;
}
/* Свечение продолжается уже поверх стекла — как в макете */
#officeHome .of-main::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 110%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 85, 247, .22), transparent 70%);
  filter: blur(20px);
}
#officeHome .of-nb { white-space: nowrap; }

#officeHome .of-main-in {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
#officeHome .of-main-in::-webkit-scrollbar { width: 6px; }
#officeHome .of-main-in::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 999px; }

#officeHome .of-greet {
  margin: 0 0 40px;
  max-width: 26ch;
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.03em;
  color: var(--wv-text);
}

#officeHome .of-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1100px;
}

#officeHome .of-tile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  text-align: left;
  border: 1px solid var(--wv-line);
  border-radius: var(--wv-r-2);
  background: linear-gradient(180deg, rgba(25, 26, 40, .6), rgba(18, 19, 31, .45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--wv-text);
  font: inherit;
  cursor: pointer;
  transition: border-color .22s var(--wv-e), transform .22s var(--wv-e), box-shadow .22s var(--wv-e);
}
#officeHome .of-tile:hover {
  transform: translateY(-2px);
  border-color: var(--wv-line-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 40px rgba(77, 166, 255, .12);
}
#officeHome .of-tile:hover .of-hex-bg { filter: drop-shadow(0 0 18px rgba(77, 166, 255, .45)); }

#officeHome .of-tile-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#officeHome .of-tile-t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
#officeHome .of-tile-d { font-size: 14px; line-height: 1.45; color: var(--wv-mute); }

/* ---------- 6. Нижняя панель ---------- */

#officeHome .of-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--wv-line);
}

#officeHome .of-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--wv-line);
  border-radius: 26px;
  background: rgba(25, 26, 40, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s var(--wv-e), box-shadow .2s var(--wv-e);
}
#officeHome .of-field:focus-within {
  border-color: rgba(77, 166, 255, .45);
  box-shadow: 0 0 0 1px rgba(77, 166, 255, .18), 0 0 34px rgba(77, 166, 255, .16);
}

#officeHome .of-input {
  flex: 1;
  min-width: 0;
  max-height: 132px;
  padding: 8px 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--wv-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}
#officeHome .of-input::placeholder { color: var(--wv-mute); }

#officeHome .of-icobtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wv-mute);
  cursor: pointer;
  transition: color .2s var(--wv-e), background .2s var(--wv-e);
}
#officeHome .of-icobtn:hover { color: var(--wv-text); background: rgba(255, 255, 255, .05); }

#officeHome .of-spec { position: relative; flex: none; }

#officeHome .of-spec-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--wv-line);
  border-radius: 999px;
  background: rgba(25, 26, 40, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--wv-text);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s var(--wv-e), background .2s var(--wv-e);
}
#officeHome .of-spec-btn:hover { border-color: var(--wv-line-2); background: rgba(30, 31, 48, .7); }
#officeHome .of-spec-btn[aria-expanded="true"] { border-color: rgba(77, 166, 255, .4); }

#officeHome .of-spec-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
#officeHome .of-spec-l { font-size: 11px; letter-spacing: .02em; color: var(--wv-mute); }
#officeHome .of-spec-v { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
#officeHome .of-chev { width: 16px; height: 16px; color: var(--wv-mute); transition: transform .2s var(--wv-e); }
#officeHome .of-spec-btn[aria-expanded="true"] .of-chev { transform: rotate(180deg); }

#officeHome .of-spec-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  z-index: 20;
  border: 1px solid var(--wv-line);
  border-radius: 18px;
  background: rgba(18, 19, 31, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(168, 85, 247, .12);
}
/* display:flex сильнее атрибута hidden — гасим явно */
#officeHome .of-spec-menu[hidden] { display: none; }

#officeHome .of-spec-opt {
  padding: 11px 14px;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wv-text);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: background .16s var(--wv-e);
}
#officeHome .of-spec-opt:hover { background: rgba(255, 255, 255, .06); }
#officeHome .of-spec-opt.is-on { background: var(--wv-grad-soft); color: var(--wv-text); }

#officeHome .of-send {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--wv-grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(77, 166, 255, .3), 0 0 40px rgba(168, 85, 247, .22),
              inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s var(--wv-e), filter .2s var(--wv-e);
}
#officeHome .of-send:hover { transform: translateY(-1px); filter: brightness(1.07); }
#officeHome .of-send:active { transform: translateY(0); }
#officeHome .of-send .of-i { width: 22px; height: 22px; }

#officeHome :focus-visible {
  outline: 2px solid rgba(77, 166, 255, .7);
  outline-offset: 2px;
}

/* ---------- 7. Адаптив ---------- */

@media (max-width: 1200px) {
  #officeHome .of-main { padding: 34px 32px 20px; }
  #officeHome .of-greet { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 30px; }
  #officeHome .of-hex-lg { --hs: 70px; }
}

@media (max-width: 980px) {
  #officeHome { overflow: visible; }
  #officeHome .of-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - var(--topbar-h));
  }
  #officeHome .of-side { order: 2; }
  /* Список задач ложится в горизонтальную ленту */
  #officeHome .of-tasks {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
  }
  #officeHome .of-task { width: auto; min-width: 240px; }
  #officeHome .of-main { order: 1; min-height: 74vh; }
}

@media (max-width: 720px) {
  #officeHome .of-app { padding: 12px; gap: 12px; }
  #officeHome .of-main { padding: 26px 20px 16px; }
  #officeHome .of-tiles { grid-template-columns: 1fr; gap: 12px; }
  #officeHome .of-tile { padding: 16px 18px; gap: 16px; }
  #officeHome .of-hex-lg { --hs: 58px; }
  #officeHome .of-greet { max-width: none; }

  /* Панель ввода в две строки: поле сверху, управление снизу */
  #officeHome .of-bar { flex-wrap: wrap; }
  #officeHome .of-field { flex: 1 0 100%; order: 1; }
  #officeHome .of-spec { order: 2; margin-right: auto; }
  #officeHome .of-send { order: 3; }
  #officeHome .of-spec-menu { left: 0; right: auto; }
}

@media (max-width: 420px) {
  #officeHome .of-spec-txt { display: none; }
  #officeHome .of-spec-btn { padding: 9px 12px 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #officeHome * { transition: none !important; }
}