/* ============================================================================
   WORKSPACE v7 (owner feedback, Sept 28)
   1. The chat is ONE tall box on the LEFT of the workspace, between the rail
      and the canvas (desktop, >= 1200px). It never sits over the design: the
      canvas starts where the chat ends, and the card is centred in what is left.
   2. The Text window opens beside the design, not in the far corner. It is
      fixed on a desktop and js/text-window.js places it in viewport pixels.
   3. Home, at the top of the rail, above Details.
   Phones (< 900px) keep their own layout; 900-1199px keeps the chat above the
   card, where a 336px rail and a chat column would leave the card no room.
   Every colour is a tenant token or a neutral (no green: the gate sweeps it).
   ========================================================================== */

/* ------------------------------- 3. Home -------------------------------- */

/* js/rail.js wraps the tab strip: Home, a rule, then the tabs. Home is not a
   tab (it leaves the designer), so it is outside the tablist. */
.rail__strip {
  flex: 0 0 74px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line-soft);
}
.rail__strip > .rail__tabs {
  flex: 0 0 auto;
  position: relative;
  border-right: 0;
  padding-top: 13px;
}
.rail__strip > .rail__tabs::before {
  content: "";
  position: absolute;
  top: 4px; left: 14px; right: 14px;
  height: 1px;
  background: var(--line);
}
.railhome {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 12px 8px 0;
  padding: 11px 2px 9px;
  border-radius: var(--r-md);
  color: var(--ink-70);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.railhome:hover { background: var(--accent-soft); color: var(--accent); }
.railhome__label { font-size: var(--fs-micro); letter-spacing: .01em; font-weight: 600; }

@media (max-width: 899px) {
  /* the drawer: Home at the start of the same row as the tabs */
  .rail__strip {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .rail__strip > .rail__tabs {
    flex: 1 1 auto;
    border-bottom: 0;
    padding: 7px 8px;
  }
  .rail__strip > .rail__tabs::before {
    top: 14px; bottom: 14px; left: 0; right: auto;
    width: 1px; height: auto;
  }
  .railhome {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 64px; min-height: 52px;
    margin: 7px 0 7px 8px;
    padding: 6px 8px;
  }
  .railhome__label { font-size: var(--fs-small); }
}

/* ----------------------- 1. the chat, docked left ------------------------ */

.dock__head { display: none; }

@media (min-width: 1200px) {
  :root {
    /* the chat column: the box plus the workspace around it */
    --chat-w: clamp(330px, 26vw, 400px);
    --chat-inset: 12px;
    /* the chat is beside the card now, not above it, so the card is given
       back the height the dock used to take (--dock-h is still measured by
       js/main.js; it simply no longer counts here) */
    --scene-top: calc(var(--chrome-h) + 10px);
  }

  /* The dotted workspace runs under the chat column too, so the box sits ON
     the workspace and the canvas carries on seamlessly to its right. */
  .workspace {
    background-color: var(--workspace);
    background-image: radial-gradient(var(--workspace-dot) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
  }
  .canvas {
    margin-left: var(--chat-w);
    background: transparent;
  }

  .dock {
    position: fixed;
    top: var(--chat-inset);
    bottom: var(--chat-inset);
    left: calc(var(--rail-w) + var(--chat-inset));
    width: calc(var(--chat-w) - var(--chat-inset));
    transform: none;
    z-index: 20;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-float);
    overflow: hidden;
  }

  .dock__head {
    display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    padding: 13px 18px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    min-width: 0;
  }
  .dock__headicon { display: inline-flex; color: var(--accent); }
  .dock__title { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.005em; }
  .dock__sub {
    font-size: var(--fs-small); color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }

  /* always visible: there is nothing to collapse to */
  .dock__toggle { display: none !important; }

  /* the conversation takes the height; it is one surface with the composer */
  .dock .dock__thread {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 18px 18px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dock__panel {
    flex: 0 0 auto;
    background: var(--paper);
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px 12px;
  }

  /* still the largest type in the box, sized for a column rather than a bar */
  .hero__line { font-size: clamp(19px, 1.5vw, 22px); }

  /* the disclosure and the designer, stacked: a column is too narrow to share */
  .dock__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dock__foot .helplink { margin: 0 0 0 -4px; padding: 0 8px; min-height: 30px; }
}

/* The control row is measured against the WORKSPACE, not the window: with the
   chat column beside it the workspace is narrower than the screen, and the
   row gives up its long labels (the way a phone does) before it wraps onto a
   second line, which would be taken out of the card's height. The chrome row
   is the container because it has no fixed-position descendants; the canvas
   cannot be one (a container would trap the fixed Text window inside it). */
@media (min-width: 900px) {
  .chrome { container-type: inline-size; }
}
@container (max-width: 880px) {
  .newcard { width: 34px; padding: 4px; justify-content: center; }
  .newcard__label { display: none; }
  .newcard.is-confirming { width: auto; padding: 4px 12px 4px 9px; }
  .newcard.is-confirming .newcard__label { display: inline; }
  .switch__long { display: none; }
}

/* --------------------- 2. the Text window, beside it --------------------- */

@media (min-width: 900px) {
  .textwin {
    position: fixed;
    right: auto;
    z-index: 30;
  }
}