/* Cluster web app — duplicate the home into up to 4 resizable tiles.
   The base home is untouched until you duplicate; only then is it wrapped in a
   flex row alongside iframe tiles. Token-driven → light / dark follow. */

/* the "+" that duplicates the home (top-right, top window only) */
.dup-home {
  position: fixed;
  bottom: 18px;
  right: 18px;
  /* BINDING rule: the + is ALWAYS on top of its band — above the dock (89)
     and the floating button (90) */
  z-index: 92;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  color: var(--blue);
  /* YARI SAYDAM (kullanıcı isteği): kabuk aynen kalır, yalnız yarı geçirgen
     olur — ekranın üstünde tam opak bir leke gibi durmaz. Bağlayıcı kural
     bozulmadı: hâlâ her zaman en önde ve asla gizlenmiyor.
     İmleç üstüne gelince tam opaklığa çıkar (keşfedilebilirlik korunur). */
  opacity: 0.5;
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease-snap),
    opacity var(--dur-2) ease,
    filter var(--dur-2) ease;
}
.dup-home:hover {
  opacity: 1;
  filter: brightness(1.1);
}
.dup-home:focus-visible {
  opacity: 1;
}
.dup-home:active {
  transform: scale(0.92);
}
.dup-home svg {
  width: 22px;
  height: 22px;
}
.dup-home[hidden] {
  display: none;
}
/* Binding design decision: the "+" is ALWAYS on top, apps included — the UI
   designs around it, never the other way. Anything interactive that reaches
   the bottom-right corner reserves its footprint (40px + 18px margin) while
   the button exists (top window only; framed panes have no button). */
body:has(.dup-home:not([hidden])) .chat-input-bar {
  padding-right: 70px;
}

/* the tile row (present only while duplicated) */
#tiles {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
}
/* the base home becomes a flex tile instead of a full-screen layer */
.tiles-active #home-screen {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.tile-frame {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.tile-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  box-shadow: var(--glass-spec);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  color: var(--label);
  cursor: pointer;
}
.tile-close svg {
  width: 16px;
  height: 16px;
}

/* resizable dividers between tiles */
.tile-divider {
  flex: none;
  width: 1px;
  background: var(--sep);
  cursor: col-resize;
  position: relative;
  z-index: 2;
  touch-action: none;
}
.tile-divider::before {
  content: '';
  position: absolute;
  inset: 0 -5px;
}
.tile-divider:hover {
  background: color-mix(in srgb, var(--blue) 60%, var(--sep));
}
body.resizing,
body.resizing * {
  cursor: col-resize !important;
  user-select: none;
}
/* while dragging a divider, stop the iframes from swallowing the pointer moves
   (otherwise the parent stops receiving them the moment the cursor is over a tile) */
body.resizing iframe {
  pointer-events: none;
}