/* ══════════════════════════════════════════════════════════════
   DIRTYWORK — "окно браузера" (компонент-заготовка, см. browser-frame.php)
   ══════════════════════════════════════════════════════════════ */

.dw-browser-frame{
  position:relative;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  aspect-ratio:5/3.6;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--card-border);
  background:var(--darkest);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}

/* ── Тайтлбар ── */
.dw-browser-bar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:100%;
  padding:9px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--card-border);
  box-shadow:0 1px 1px rgba(0,0,0,.08);
  flex-shrink:0;
}

.dw-browser-dots{
  position:absolute;
  left:16px;top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;
}
.dw-browser-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dw-browser-dot--red{background:#f87171}
.dw-browser-dot--yellow{background:#facc15}
.dw-browser-dot--green{background:#4ade80}

.dw-browser-url{
  width:100%;
  text-align:center;
  font-size:13px;
  font-family:var(--font-body);
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dw-browser-url-dim{opacity:.5}

.dw-browser-fullscreen{
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  display:none;
  align-items:center;justify-content:center;
  width:30px;height:30px;
  border:none;border-radius:var(--radius-xs);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.dw-browser-fullscreen:hover{background:var(--accent-subtle);color:var(--text)}

/* Кнопка фулскрина — только там, где есть место (как в оригинале, md+) */
@media(min-width:768px){
  .dw-browser-fullscreen{display:flex}
}

/* ── Контент ── */
.dw-browser-content{
  position:relative;
  flex:1;
  overflow:hidden;
  background:var(--surface2);
}
.dw-browser-content iframe,
.dw-browser-content img,
.dw-browser-content video{
  display:block;
  width:100%;
  height:100%;
  border:none;
  object-fit:cover;
}

/* Фулскрин-режим: контент растягивается на весь экран, тайтлбар остаётся сверху */
.dw-browser-frame:fullscreen{
  max-width:none;
  aspect-ratio:auto;
  border-radius:0;
}
.dw-browser-frame:fullscreen .dw-browser-content{flex:1}