/* Editing studio layout. Components live in components.css; colours in theme.css.
   Layout state lives on <body>: data-pane (phone: chat|website), data-panel (website|changes|history|settings),
   data-chat (open|collapsed), data-device (desktop|phone), data-busy (true while a request runs). */

html, body { height: 100%; }
body { overflow: hidden; background: var(--bg-secondary); }
[hidden] { display: none !important; } /* wp-allow: the hidden attribute always wins over component display */

.studio {
  --chat-width: calc(var(--size-sidebar) + var(--size-inspector) / 2);
  --phone-width: 390px;
  display: grid;
  grid-template-columns: var(--chat-width) minmax(0, 1fr);
  grid-template-rows: 100dvh;
  height: 100dvh;
}
body[data-chat="collapsed"] .studio { grid-template-columns: minmax(0, 1fr); }
body[data-chat="collapsed"] .studio-chat { display: none; }

/* ---------- Conversation column ---------- */
.studio-chat {
  position: relative; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
.studio-chat__head { grid-row: 1; }
.studio-chat__scroll { grid-row: 2; }
.studio-dock { grid-row: 3; }
.studio-chat__head, .studio-panel__head {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-toolbar); padding: 0 var(--space-3);
}
.studio-site {
  display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin-right: auto;
  padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.studio-site:hover { background: var(--fill); }
.studio-site > span { display: grid; min-width: 0; }
.studio-site strong, .studio-site small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-site strong { font-weight: var(--weight-semibold); }
.studio-site small { color: var(--text-secondary); font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); }
.studio-site .lw-icon { color: var(--text-secondary); }

.studio-chat__scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-4) var(--space-4) var(--space-6); }
.studio-chat__scroll > * { max-width: var(--size-reading); margin-inline: auto; }
#conversation:empty { display: none; }

.studio-welcome { display: grid; gap: var(--space-3); padding-top: var(--space-8); }
.studio-welcome h1 { font-size: var(--text-title2-size); line-height: var(--text-title2-line); letter-spacing: var(--text-title2-tracking); }
.studio-welcome > p { color: var(--text-secondary); }
.studio-welcome .lw-starters { margin-top: var(--space-2); }
.studio-welcome__note { font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); }
.studio-welcome__note:empty { display: none; }

.studio-waiting { display: grid; gap: var(--space-3); margin-top: var(--space-8); }

.studio-dock { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }
.studio-dock > * { flex: none; width: 100%; max-width: var(--size-reading); margin-inline: auto; }
body[data-busy="true"] #chips { display: none; }

/* Resize handle on the column edge. Click hides the conversation; arrows resize. */
.studio-resize {
  position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--space-1)); z-index: 2;
  width: var(--space-2); padding: 0; border: 0; background: transparent; cursor: col-resize;
}
.studio-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--space-0_5) / 2); width: var(--space-0_5);
  background: transparent; transition: background-color var(--motion-standard) var(--motion-ease-standard);
}
.studio-resize:hover::after, .studio-resize:focus-visible::after, body[data-resizing] .studio-resize::after { background: var(--accent); }
body[data-resizing] { cursor: col-resize; user-select: none; }
body[data-resizing] iframe { pointer-events: none; }

/* ---------- Website panel ---------- */
.studio-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0 var(--space-2) var(--space-2) 0; }
body[data-chat="collapsed"] .studio-panel { padding-left: var(--space-2); }
.studio-panel__head { padding-inline: var(--space-1); }
.studio-panel__tools { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-left: auto; }
.studio-panel__tools .lw-address { min-width: 0; }
.studio-panel__title { margin-left: auto; margin-right: auto; padding-right: var(--size-control-sm); font-weight: var(--weight-semibold); }
body[data-panel="website"] .studio-panel__title, body:not([data-panel="website"]) .studio-panel__tools { display: none; }
.studio-device.wp-segmented > * { display: inline-grid; place-items: center; padding: 0 var(--space-2); color: var(--text-secondary); }
.studio-device.wp-segmented > [aria-pressed="true"] { color: var(--text); }

.studio-sheet {
  position: relative; min-height: 0; overflow: hidden;
  border-radius: var(--radius-group); background: var(--surface);
  box-shadow: 0 0 0 var(--size-hairline) var(--edge), var(--elevation-1);
}
.studio-view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
#view-website { overflow: hidden; }
.studio-frame { display: grid; justify-items: center; height: 100%; }
.studio-frame iframe {
  display: block; width: 100%; height: 100%; border: 0;
  color-scheme: light; background: Canvas; /* customer documents keep their own design; never inherit app dark mode */
}
body[data-device="phone"] .studio-frame { padding: var(--space-4) 0; background: var(--bg-secondary); }
body[data-device="phone"] .studio-frame iframe { width: min(var(--phone-width), 100%); border-radius: var(--radius-sheet); box-shadow: 0 0 0 var(--size-hairline) var(--edge), var(--elevation-2); }
#placeholder { position: absolute; inset: 0; background: var(--surface); }
.studio-preview-notice { position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 1; max-width: calc(100% - 2 * var(--space-4)); box-shadow: var(--elevation-3); background: var(--surface-raised); }
.studio-preview-notice[hidden] { display: none; }

/* Arrival: the real document fades in once. Reduced motion removes it (wisepunk.css base). */
.studio-frame iframe:not([hidden]) { animation: studio-arrive var(--motion-emphasized) var(--motion-ease-standard); }
@keyframes studio-arrive { from { opacity: 0; } }

/* ---------- Phone and narrow windows: one pane at a time ---------- */
.studio-mobilebar { display: none; }
@media (max-width: 1023px) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .studio-mobilebar {
    grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    min-height: var(--size-toolbar); padding: 0 var(--gutter);
  }
  .studio-mobilebar .wp-segmented > * { min-width: calc(var(--size-control-lg) * 2); }
  .studio-chat, .studio-panel { grid-row: 2; grid-column: 1; }
  .studio-chat__head, .studio-resize, #collapse-chat, #expand-chat { display: none; }
  body[data-pane="chat"] .studio-panel { display: none; }
  body[data-pane="website"] .studio-chat { display: none; }
  body[data-chat="collapsed"] .studio-chat { display: none; }
  .studio-panel { padding: 0 var(--space-2) var(--space-2); }
  .studio-panel__head { flex-wrap: wrap; padding-block: var(--space-1); }
  .studio-chat__scroll { padding-inline: var(--gutter); }
  .studio-dock { padding-inline: var(--gutter); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
}
@media (max-width: 599px) {
  .studio-panel { padding: 0; }
  .studio-sheet { border-radius: 0; box-shadow: none; }
  .studio-device { display: none; }
  .studio-panel__tools { flex: 1; }
  .studio-panel__tools .lw-address { flex: 1; }
  .studio-panel__tools .lw-address select { flex: 1; }
  .studio-welcome { padding-top: var(--space-4); }
}