/* css/overlays-layout.css — loaded in index.html cascade order. */
/* -------------------------------------------------------------------------- */

/* Empty room                                                                 */

/* -------------------------------------------------------------------------- */

.messages{
  position:relative;
}

.room-empty-state{
  position:absolute;
  inset:0;
  z-index:3;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px 20px;
  color:var(--ui-copy-muted);
  text-align:center;
  pointer-events:none;
  user-select:none;
}

.room-empty-state[hidden]{
  display:none !important;
}

.room-empty-state-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border:1px solid rgba(103,165,231,.20);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(92,151,218,.14), rgba(79,169,131,.08));
  color:#82b7ed;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.room-empty-state-icon svg{
  width:29px;
  height:29px;
}

.room-empty-state strong{
  color:#dfeaf4;
  font-size:17px;
  font-weight:720;
  letter-spacing:-.015em;
}

.room-empty-state > span:last-child{
  max-width:36ch;
  font-size:12.5px;
  line-height:1.5;
}

/* -------------------------------------------------------------------------- */

/* Toasts: current application surface, preserved opposite-side positioning  */

/* -------------------------------------------------------------------------- */

.toast{
  --toast-tone:var(--ui-accent-final);
  width:min(420px, calc(100vw - 36px));
  transform:translate3d(0,-8px,0) scale(.985);
}

.toast[data-tone="success"]{--toast-tone:var(--ui-success-final)}

.toast[data-tone="warning"]{--toast-tone:var(--ui-warning-final)}

.toast[data-tone="danger"]{--toast-tone:var(--ui-danger-final)}

.toast[data-tone="info"]{--toast-tone:var(--ui-accent-final)}

.toast-inner{
  grid-template-columns:36px minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:11px !important;
  padding:12px 12px 14px !important;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--toast-tone) 28%, rgba(145,171,201,.16)) !important;
  border-radius:14px !important;
  background:rgba(24,32,42,.97) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.toast-inner::before{
  width:3px !important;
  height:auto !important;
  inset:8px auto 8px 0 !important;
  border-radius:0 999px 999px 0;
  background:var(--toast-tone) !important;
  opacity:.95 !important;
}

.toast-status-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--toast-tone) 30%, transparent);
  border-radius:11px;
  background:color-mix(in srgb, var(--toast-tone) 13%, transparent);
  color:var(--toast-tone);
}

.toast-status-icon svg{
  width:19px;
  height:19px;
}

.toast-left{
  padding-left:0 !important;
  align-self:center;
}

.toast-left::before{
  display:none !important;
}

.toast-title{
  color:#edf4fb;
  font-size:13.5px !important;
  font-weight:720 !important;
  letter-spacing:0 !important;
}

.toast-body{
  margin-top:3px !important;
  color:#96a4b4 !important;
  font-size:12px !important;
  line-height:1.42 !important;
}

.toast-right{
  gap:6px !important;
}

.toast .icon-btn,
.toast .btn.tiny{
  min-height:34px;
  border-color:rgba(145,171,201,.12) !important;
  border-radius:10px !important;
  background:#222d38 !important;
  box-shadow:none !important;
}

.toast-timer{
  left:49px !important;
  right:12px !important;
  bottom:7px !important;
  height:2px !important;
  background:rgba(145,171,201,.10) !important;
}

.toast-timer-bar{
  background:var(--toast-tone) !important;
  box-shadow:none !important;
}

/* -------------------------------------------------------------------------- */

/* Modal shell stability and HTML Hub                                     */

/* -------------------------------------------------------------------------- */

.modal-main{
  width:100%;
  flex:1 1 auto;
  min-height:0;
  contain:none;
}

.modal-body{
  min-width:0;
  min-height:0;
  contain:none;
}

.modal[data-size="html-hub"] .modal-card{
  width:min(1180px, calc(100vw - 32px)) !important;
  height:min(720px, calc(100dvh - 32px)) !important;
  min-height:0 !important;
  max-height:calc(100dvh - 32px) !important;
  border:1px solid var(--ui-line-final) !important;
  border-radius:18px !important;
  background:var(--ui-canvas-final) !important;
}

.modal[data-size="html-hub"] .modal-main{
  height:100%;
}

.modal[data-size="html-hub"] .modal-head{
  padding:15px 17px !important;
  border-bottom:1px solid var(--ui-line-final) !important;
  background:#18212b !important;
}

.modal[data-size="html-hub"] .modal-body{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  padding:0 !important;
  overflow:hidden !important;
  background:#121820 !important;
}

.modal[data-size="html-hub"] .html-hub-titlebar{
  grid-template-columns:minmax(0,1fr) minmax(220px,340px) !important;
  gap:14px !important;
}

.modal[data-size="html-hub"] .html-hub-title-text{
  color:#edf4fb;
  font-size:19px;
  font-weight:730;
}

.modal[data-size="html-hub"] .html-hub-title-sub{
  color:#7f8d9e;
}

.modal[data-size="html-hub"] .html-hub-search-input{
  width:100% !important;
  min-width:0 !important;
  min-height:42px;
  border:1px solid var(--ui-line-final) !important;
  border-radius:11px !important;
  background:#10161d !important;
  color:#edf4fb !important;
}

.html-hub-layout{
  width:100%;
  height:100%;
  min-height:0 !important;
  flex:1 1 auto;
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) !important;
  overflow:hidden;
}

.html-hub-sidebar{
  min-height:0;
  padding:15px 10px !important;
  overflow-x:hidden;
  overflow-y:auto;
  border-right:1px solid var(--ui-line-final) !important;
  background:#10161d !important;
}

.html-hub-nav-item{
  min-height:42px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
}

.html-hub-nav-item:hover{
  border-color:rgba(145,171,201,.09) !important;
  background:#1c2631 !important;
}

.html-hub-nav-item.is-active{
  border-color:rgba(103,165,231,.20) !important;
  background:linear-gradient(90deg, rgba(92,151,218,.20), rgba(79,169,131,.09)) !important;
}

.html-hub-content{
  min-width:0;
  min-height:0;
  padding:20px !important;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#131a22;
}

.html-hub-content-head{
  margin-bottom:16px !important;
}

.html-hub-content-head h3{
  font-size:17px !important;
  font-weight:720 !important;
}

.html-hub-grid{
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr)) !important;
  gap:11px !important;
}

.html-hub-card{
  position:relative;
  min-height:104px !important;
}

.html-hub-card-main{
  min-height:104px !important;
  padding:12px 52px 12px 12px !important;
  border:1px solid var(--ui-line-final) !important;
  border-radius:13px !important;
  background:#1a232d !important;
}

.html-hub-card:hover .html-hub-card-main,
.html-hub-card:focus-within .html-hub-card-main{
  border-color:rgba(103,165,231,.38) !important;
  background:#202c38 !important;
}

.html-hub-card-mark{
  width:46px !important;
  height:46px !important;
  flex-basis:46px !important;
  border-radius:12px !important;
}

.html-hub-card-title{
  font-size:14px !important;
  font-weight:700 !important;
}

.html-hub-card-meta{
  color:#7e8da0 !important;
  font-size:11px !important;
  line-height:1.35;
}

.html-hub-card-copy{
  min-width:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.html-hub-card-owner{
  width:100%;
  min-width:0;
  margin-top:3px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#a9b7c7;
  font-size:11px;
  font-weight:560;
  line-height:1.2;
}

.html-hub-owner-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  overflow:hidden;
  border:1px solid rgba(160,181,204,.24);
  border-radius:50%;
  background:#0f151c;
}

.html-hub-owner-copy{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.html-hub-owner-username{
  color:#d6e2ed;
  font-weight:700;
}

.html-hub-card-open{
  display:none !important;
}

.html-hub-card-options{
  appearance:none;
  position:absolute;
  z-index:3;
  top:50%;
  right:8px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  transform:translateY(-50%);
  border:1px solid rgba(145,171,201,.16);
  border-radius:10px;
  background:#202a35;
  color:#9aa9b9;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}

.html-hub-card-options:hover,
.html-hub-card-options:focus-visible,
.html-hub-card-options[aria-expanded="true"]{
  border-color:rgba(103,165,231,.42);
  background:#293746;
  color:#e5f1fb;
}

.html-hub-form-card{
  width:min(640px,100%) !important;
  padding:18px !important;
  border-color:var(--ui-line-final) !important;
  border-radius:14px !important;
  background:#19212b !important;
}

.html-hub-file-drop{
  border-color:rgba(145,171,201,.23) !important;
  border-radius:12px !important;
  background:#121920 !important;
}