/* ========================================================================
   Уведомления сайта (modules/hello) — раскладка по типам и зонам.
   Внешний вид карточки и кнопки задаёт редактор стилей блоков
   (hello-notice, hello-button) инлайном; здесь — только положение и
   запасной вид на случай, если стиль блока ещё не заведён.
   !important на свойствах редактора стилей (фон, цвет, отступы, рамка,
   скругление) не ставить — иначе настройка владельца не применится.
   Исключение — скругление на тех краях окна, которыми оно прижато к краю
   экрана (окно справа/слева/сверху/снизу): там углов быть не может.

   Типы (2026-10-13):
     .hello-notice--panel  — плашка в зоне (.hello-zone--<зона>);
     .hello-notice--flash  — флэш, в той же зоне, исчезает сам (полоска
                             .hello-flash-bar показывает, сколько осталось);
     .hello-win--<сторона> — окно как у разделов (css/section-window.css):
                             затемнение, панель выезжает со своей стороны;
     .hello-sys--<зона>    — системное окно: шапка, перетаскивание, ручки.
   ======================================================================== */
.hello-root{position:relative;z-index:99990}
.hello-zone{position:fixed;z-index:99990;display:flex;flex-direction:column;gap:10px;pointer-events:none;
  max-width:min(560px,calc(100vw - 32px))}
.hello-zone > .hello-notice{pointer-events:auto}
.hello-zone--bottom-left{left:16px;bottom:16px}
.hello-zone--bottom-right{right:16px;bottom:16px;align-items:flex-end}
.hello-zone--top-left{left:16px;top:16px}
.hello-zone--top-right{right:16px;top:16px;align-items:flex-end}
.hello-zone--center{left:50%;top:50%;transform:translate(-50%,-50%);align-items:center}
.hello-zone--top,.hello-zone--bottom{left:0;right:0;max-width:none;gap:0}
.hello-zone--top{top:0}
.hello-zone--bottom{bottom:0}
.hello-zone--top > .hello-notice,.hello-zone--bottom > .hello-notice{width:100%;max-width:none}
/* Новые флэши — ближе к краю экрана: снизу стопка растёт вверх. */
.hello-zone--bottom-left,.hello-zone--bottom-right,.hello-zone--bottom{flex-direction:column-reverse}

/* Запасной вид (если стиль блока пуст). */
.hello-notice{position:relative;box-sizing:border-box;display:flex;gap:14px;align-items:center;
  background:#1f2937;color:#fff;border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.5;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.hello-notice[hidden],.hello-overlay[hidden],.hello-sys[hidden]{display:none!important}
.hello-zone--top > .hello-notice,.hello-zone--bottom > .hello-notice{border-radius:0;justify-content:center}
.hello-text{flex:1 1 auto;min-width:0}
.hello-text a{color:inherit;text-decoration:underline}
.hello-text p{margin:0 0 .4em}.hello-text p:last-child{margin-bottom:0}
.hello-btn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font:inherit;font-weight:700;border:0;border-radius:999px;background:#fff;color:#111827;padding:9px 18px;
  text-decoration:none;white-space:nowrap}
.hello-btn:focus-visible,.hello-close:focus-visible,.hello-sys__x:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
.hello-close{position:absolute;top:4px;right:6px;border:0;background:none;color:inherit;opacity:.7;font-size:22px;
  line-height:1;cursor:pointer;padding:4px 8px}
.hello-close:hover{opacity:1}
.hello-notice:has(> .hello-close){padding-right:40px}

/* ⚙ администратора: штатные -15px увели бы её за край экрана у окна,
   прижатого к краю, и под шапку системного окна — ставим внутрь. */
.hello-root .hello-notice.block-style-editable:not(.no-admin) > .style-edit-btn{top:6px!important;left:6px!important}

/* ---------------------------------------------------------------- флэш */
.hello-notice--flash{overflow:hidden;min-width:min(280px,calc(100vw - 32px))}
.hello-flash-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.35;
  transform-origin:left center;transform:scaleX(1);pointer-events:none}
.hello-notice--flash.hello-run .hello-flash-bar{animation:helloBar linear forwards;animation-duration:var(--hello-dur,6s)}
.hello-notice--flash.hello-paused .hello-flash-bar{animation-play-state:paused}
@keyframes helloBar{to{transform:scaleX(0)}}
.hello-notice.hello-out{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}

/* ------------------------------------------------ окно, как у разделов */
.hello-overlay{position:fixed;inset:0;z-index:99995;background:rgba(15,23,42,.55);box-sizing:border-box;
  opacity:0;transition:opacity .2s ease}
.hello-overlay.hello-open{opacity:1}
.hello-win__panel{position:absolute;display:flex;max-width:100%;max-height:100%;transition:transform .25s ease;pointer-events:none}
.hello-win__panel > .hello-notice{pointer-events:auto}
.hello-notice--window{flex-direction:column;align-items:stretch;box-sizing:border-box;overflow:auto;padding:28px 24px 24px}
.hello-notice--window .hello-btn{align-self:flex-end;margin-top:auto}
.hello-notice--window .hello-text{flex:0 1 auto}
.hello-notice--window > .hello-close{top:8px;right:8px}
.hello-notice--window:focus{outline:none}

.hello-win--left .hello-win__panel,.hello-win--right .hello-win__panel{top:0;bottom:0}
.hello-win--left .hello-win__panel{left:0;transform:translateX(-100%)}
.hello-win--right .hello-win__panel{right:0;transform:translateX(100%)}
.hello-win--left .hello-notice,.hello-win--right .hello-notice{width:420px;max-width:92vw;height:100%}
.hello-win--left .hello-notice{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.hello-win--right .hello-notice{border-top-right-radius:0!important;border-bottom-right-radius:0!important}

.hello-win--top .hello-win__panel,.hello-win--bottom .hello-win__panel{left:0;right:0}
.hello-win--top .hello-win__panel{top:0;transform:translateY(-100%)}
.hello-win--bottom .hello-win__panel{bottom:0;transform:translateY(100%)}
.hello-win--top .hello-notice,.hello-win--bottom .hello-notice{width:100%;max-height:80vh}
.hello-win--top .hello-notice{border-top-left-radius:0!important;border-top-right-radius:0!important}
.hello-win--bottom .hello-notice{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.hello-win--top .hello-notice .hello-btn,.hello-win--bottom .hello-notice .hello-btn{margin-top:14px}

.hello-win--center .hello-win__panel{top:50%;left:50%;transform:translate(-50%,-50%) scale(.96)}
.hello-win--center .hello-notice{width:520px;max-width:92vw;max-height:88vh}
.hello-win--center .hello-notice .hello-btn{margin-top:18px}

.hello-overlay.hello-open .hello-win__panel{transform:none}
.hello-overlay.hello-open.hello-win--center .hello-win__panel{transform:translate(-50%,-50%)}
html.hello-locked{overflow:hidden}

/* ---------------------------------------------------- системное окно */
.hello-sys{position:fixed;z-index:99994;display:flex;flex-direction:column;box-sizing:border-box;
  width:380px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);
  border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.28);opacity:0;transform:scale(.97);
  transition:opacity .15s ease,transform .15s ease}
.hello-sys.hello-open{opacity:1;transform:none}
.hello-sys--top-left{left:16px;top:16px}
.hello-sys--top-right{right:16px;top:16px}
.hello-sys--bottom-left{left:16px;bottom:16px}
.hello-sys--bottom-right{right:16px;bottom:16px}
.hello-sys--top{top:16px;left:calc(50% - 190px)}
.hello-sys--bottom{bottom:16px;left:calc(50% - 190px)}
.hello-sys--center{top:calc(50% - 120px);left:calc(50% - 190px)}
.hello-sys__bar{flex:none;display:flex;align-items:stretch;height:34px;padding-left:12px;background:#f3f4f6;color:#222;
  border:1px solid rgba(0,0,0,.08);border-bottom:0;border-radius:8px 8px 0 0;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:none}
.hello-sys__title{flex:1 1 auto;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600}
.hello-sys__x{position:relative;flex:none;width:44px;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;border-top-right-radius:8px}
.hello-sys__x::before,.hello-sys__x::after{content:'';position:absolute;left:15px;top:50%;width:14px;border-top:1px solid currentColor;transform:rotate(45deg)}
.hello-sys__x::after{transform:rotate(-45deg)}
.hello-sys__x:hover{background:#e81123;color:#fff}
.hello-notice--system{flex:1 1 auto;min-height:0;overflow:auto;flex-direction:column;align-items:stretch;
  border-top-left-radius:0!important;border-top-right-radius:0!important;box-shadow:none}
.hello-notice--system .hello-btn{align-self:flex-end}
.hello-sys.hello-sized{max-width:none;max-height:none}
.hello-rs{position:absolute;z-index:2;touch-action:none}
.hello-rs-n,.hello-rs-s{left:10px;right:10px;height:8px;cursor:ns-resize}
.hello-rs-e,.hello-rs-w{top:10px;bottom:10px;width:8px;cursor:ew-resize}
.hello-rs-n{top:-4px}.hello-rs-s{bottom:-4px}.hello-rs-e{right:-4px}.hello-rs-w{left:-4px}
.hello-rs-ne,.hello-rs-nw,.hello-rs-se,.hello-rs-sw{width:14px;height:14px}
.hello-rs-ne{top:-5px;right:-5px;cursor:nesw-resize}.hello-rs-sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.hello-rs-nw{top:-5px;left:-5px;cursor:nwse-resize}.hello-rs-se{bottom:-5px;right:-5px;cursor:nwse-resize}
html.hello-dragging,html.hello-dragging *{user-select:none!important;-webkit-user-select:none!important}
html.hello-dragging iframe{pointer-events:none!important}
html[data-hello-cursor] *{cursor:var(--hello-cursor)!important}

@media (max-width:576px){
  .hello-win--left .hello-win__panel,.hello-win--right .hello-win__panel{left:0;right:0}
  .hello-win--left .hello-notice,.hello-win--right .hello-notice,.hello-win--center .hello-notice{width:100%;max-width:100%}
  .hello-win--center .hello-win__panel{left:12px;right:12px;transform:translateY(-50%) scale(.96)}
  .hello-overlay.hello-open.hello-win--center .hello-win__panel{transform:translateY(-50%)}
  /* системное окно на телефоне — листом снизу, не таскается */
  .hello-sys{left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;width:auto!important;height:auto!important;max-height:70vh}
  .hello-sys__bar{cursor:default}
  .hello-rs{display:none}
}
@media (max-width:560px){
  .hello-zone:not(.hello-zone--top):not(.hello-zone--bottom){left:12px;right:12px;max-width:none;align-items:stretch;transform:none}
  .hello-zone--center{top:auto;bottom:12px}
  .hello-notice--panel,.hello-notice--flash{flex-direction:column;align-items:stretch;text-align:left}
}
@media (prefers-reduced-motion:no-preference){
  .hello-zone .hello-notice.hello-in{animation:helloIn .25s ease-out}
  @keyframes helloIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .hello-overlay,.hello-win__panel,.hello-sys{transition:none}
}