/* ═══════════════════════════ THE DESIGNER ON A PHONE ═══════════════════════════
   Owner, Oct 10: "The mobile version needs some work for the designer … pinch
   zoom doesn't work, you click on some text and the big text box takes over half
   the screen and you can't even edit the text because it overlaps everything."
   He chose (AskUserQuestion, Oct 10):
     • the CARD ON TOP, as big as the phone allows, and the chat as a BAR AT THE
       BOTTOM — the last thing said, the question, the box, "I'm happy"; "Chat
       history" opens the whole conversation over the card;
     • a SLIM TEXT TOOLBAR when a line is tapped (Edit words, Font, Size, Colour,
       Align, More), and the words typed in a box over the keyboard with the card
       still in sight above it (js/phone-edit.js).
   Loaded LAST, and every rule but the desktop guards sits inside the phone
   breakpoint the rest of the studio uses (≤ 899px): a desktop is untouched.

   The bottom of the screen holds exactly ONE thing at a time, and the card is
   sized to the room above it (--scene-bottom):
     the chat bar  ·  the text toolbar (a line selected)  ·  the word box (typing
     a line)  ·  the Details sheet — each standing on the keyboard (--kb-h, set
     by js/main.js installKeyboardWatch) when it is up. */

/* desktop guards: the phone-only pieces never show on a wide screen */
.dock__togglelabel,
.railtoggle__label,
.rail__done,
.textwin__tabs { display: none; }
.wordbar { display: none; }

@media (max-width: 899px) {
  :root {
    /* above the card: only the control row; below it: front|back and the chat */
    --scene-top: calc(var(--chrome-h) + 8px);
    --scene-bottom: calc(var(--dock-h) + var(--underbar-h) + var(--kb-h, 0px) + 14px);
  }
  /* one thing at the bottom at a time, and the card fits above it */
  :root.has-textwin { --scene-bottom: calc(var(--textwin-h, 112px) + var(--kb-h, 0px) + 12px); }
  :root.is-wording { --scene-bottom: calc(var(--wordbar-h, 104px) + var(--kb-h, 0px) + 12px); }
  :root.drawer-open { --scene-bottom: calc(var(--drawer-h, 50dvh) + var(--kb-h, 0px) + 10px); }

  /* ---------------------------------------------------------------- chrome
     Pinch and double-tap zoom now, so the − and + steps step aside and the
     percentage is the "fit" button; the options button says what it opens. */
  #zoomIn, #zoomOut { display: none; }
  .railtoggle { width: auto; min-width: 44px; padding: 0 12px 0 10px; gap: 6px; display: inline-flex; align-items: center; }
  .railtoggle__label { display: inline; font-size: 13.5px; font-weight: 600; color: var(--ink); }

  /* the card stays anchored under the controls (not centred in its room): the
     room changes when the text toolbar or the chat bar comes and goes, and a
     centred card would jump out from under a second tap */
  .canvas__scene { align-items: flex-start; }

  /* ------------------------------------------------------- the chat bar */
  #dock {
    top: auto;
    bottom: var(--kb-h, 0px);
    left: 0; right: 0;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
    padding: 8px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 34px -20px rgba(20, 22, 28, .32);
    transition: none;
  }
  :root.kb-open #dock { padding-bottom: 8px; }
  #dock > .dock__head { grid-column: 1; grid-row: 1; margin: 0; padding: 2px 0 0; min-height: 0; }
  #dock > .dock__toggle { grid-column: 2; grid-row: 1; order: 0; }
  #dock > .dock__thread { grid-column: 1 / -1; order: 1; }
  #dock > .dock__panel { grid-column: 1 / -1; order: 2; }
  #dock > .dock__next { grid-column: 1 / -1; order: 3; }

  /* "Chat history": a labelled pill, not a bare chevron */
  #dock .dock__toggle { width: auto; height: 44px; padding: 0 12px; gap: 6px; color: var(--ink-70); font-size: 13px; font-weight: 600; }
  #dock .dock__toggle::before { height: 34px; }
  #dock .dock__togglelabel { display: inline; position: relative; z-index: 1; }
  #dock[data-open="false"] .dock__toggle svg { transform: rotate(180deg); }
  #dock[data-open="true"] .dock__toggle svg { transform: none; }

  /* folded (the default): the last thing said, nothing more */
  #dock[data-thread="true"] .dock__thread { display: flex; }
  #dock[data-open="false"] .dock__thread {
    max-height: min(20dvh, 150px);
    padding: 2px 0;
    gap: 10px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #dock[data-open="false"] .dock__thread > :not(:last-child) { display: none; }
  /* the bar already says "Mahi AI" in its corner */
  #dock[data-open="false"] .dock__thread .msg__who { display: none; }
  /* open: the whole conversation, over the card, above the bar */
  #dock[data-open="true"] .dock__thread {
    position: absolute;
    left: 8px; right: 8px;
    bottom: calc(100% + 8px);
    max-height: min(62dvh, calc(100dvh - var(--dock-h) - var(--chrome-h) - var(--kb-h, 0px) - 26px));
    z-index: 3;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px -18px rgba(20, 22, 28, .45);
  }

  /* the box sits IN the bar: no second card inside the first */
  #dock .dock__panel { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; gap: 6px; }
  #dock .dock__next .nextbtn { width: 100%; min-height: 50px; }

  /* the small print and the help links on one quiet line; the disclosure is
     read in the history (and the tour), not paid for on every screen */
  #dock[data-open="false"] .disclosure { display: none; }
  #dock .dock__foot { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 0 2px; }
  #dock .dock__foot .helplink { min-height: 36px; }

  /* the keyboard is up for the chat: the bar tightens to the question and the
     box, and the card stays — smaller, above it (it used to be taken away) */
  .app.kb-up .canvas__scene { display: flex; }
  .app.kb-up .chrome { display: flex; }
  .app.kb-up .stage__collapse { display: none; }
  .app.kb-up #dock { top: auto; }
  .app.kb-up #dock .dock__foot,
  .app.kb-up #dock .dock__next { display: none; }
  .app.kb-up #dock[data-open="false"] .dock__thread { max-height: min(12dvh, 84px); }

  /* front|back stands on the chat bar */
  .underbar {
    bottom: calc(var(--dock-h) + var(--kb-h, 0px));
    padding: 0 10px 6px;
  }
  .canvas__hint { bottom: calc(var(--dock-h) + var(--underbar-h) + var(--kb-h, 0px) + 10px); }

  /* ------------------------------------------- the text toolbar (a line) */
  :root.has-textwin #dock,
  :root.has-textwin .underbar,
  :root.has-textwin .canvas__hint { display: none; }
  #textWindow {
    position: fixed;
    left: 0; right: 0; top: auto;
    bottom: var(--kb-h, 0px);
    width: auto;
    max-height: none;
    z-index: 60;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 34px -20px rgba(20, 22, 28, .32);
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
    gap: 4px;
    animation-name: textwin-up;
  }
  :root.kb-open #textWindow { padding-bottom: 6px; }
  #textWindow .textwin__head { order: 2; border: 0; padding: 0 10px 0 14px; min-height: 0; }
  #textWindow .textwin__title { display: none; }
  #textWindow .textwin__which { font-size: 12.5px; }
  #textWindow .textwin__close { width: 44px; height: 40px; }
  #textWindow .textwin__tabs {
    order: 3;
    display: flex; gap: 4px;
    padding: 2px 6px 2px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #textWindow .textwin__tabs::-webkit-scrollbar { display: none; }
  .textwin__tab {
    flex: 1 0 auto;
    min-height: 44px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--ink);
    font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
  }
  .textwin__tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .textwin__tab--words { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* the open tab's controls, in a short panel ABOVE the row (thumb reach) */
  #textWindow .textwin__body {
    order: 1;
    max-height: min(40dvh, 330px);
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  #textWindow[data-tab=""] .textwin__body { display: none; }
  #textWindow .textwin__body > [data-tab] { display: none; }
  #textWindow[data-tab="font"] .textwin__body > [data-tab="font"],
  #textWindow[data-tab="size"] .textwin__body > [data-tab="size"],
  #textWindow[data-tab="colour"] .textwin__body > [data-tab="colour"],
  #textWindow[data-tab="align"] .textwin__body > [data-tab="align"],
  #textWindow[data-tab="more"] .textwin__body > [data-tab="more"]:not([hidden]) { display: block; }
  /* phone-sized controls, and nothing under 16px that a finger types into
     (iOS zooms the page into any smaller box and leaves it zoomed) */
  #textWindow .textwin__size { height: 44px; }
  #textWindow .textwin__step,
  #textWindow .textwin__tog { min-width: 44px; min-height: 44px; }
  #textWindow .textwin__sizein,
  #textWindow .textwin__hexin { font-size: 16px; }
  #textWindow .textwin__switch { min-height: 44px; }
  #textWindow .textwin__remove { min-height: 44px; }

  /* --------------------------------------------- the word box (typing) */
  :root.is-wording #dock,
  :root.is-wording .underbar,
  :root.is-wording #textWindow,
  :root.is-wording .canvas__hint { display: none; }
  .wordbar:not([hidden]) {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: var(--kb-h, 0px);
    z-index: 70;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 34px -20px rgba(20, 22, 28, .32);
  }
  :root.kb-open .wordbar:not([hidden]) { padding-bottom: 10px; }
  .wordbar__label { display: block; margin: 0 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .wordbar__row { display: flex; align-items: flex-end; gap: 8px; }
  .wordbar__input {
    flex: 1 1 auto; min-width: 0;
    min-height: 48px; padding: 11px 14px;
    border: 1.5px solid var(--ink); border-radius: 14px;
    background: #fff; color: var(--ink);
    font-family: inherit; font-weight: 400; font-size: 17px; line-height: 1.35;
    resize: none; overflow-y: auto;
  }
  .wordbar__input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
  .wordbar__done {
    flex: 0 0 auto;
    min-height: 48px; min-width: 76px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1;
  }

  /* ------------------------------------------------- the Details sheet
     A half sheet with the card in sight above it, standing on the keyboard,
     and a Done to put it away. The workspace around it stays clear (a tap on
     it closes the sheet, as before) rather than greyed out. */
  .rail { max-height: min(56dvh, 540px); }
  /* only an OPEN sheet stands on the keyboard: a closed one lifted by it would
     peek out from under whatever else is using the keyboard */
  :root.drawer-open .rail { bottom: var(--kb-h, 0px); }
  .rail__body { max-height: calc(min(56dvh, 540px) - 66px); }
  :root.kb-open .rail { max-height: calc(100dvh - var(--kb-h, 0px) - var(--chrome-h) - 150px); }
  :root.kb-open .rail__body { max-height: calc(100dvh - var(--kb-h, 0px) - var(--chrome-h) - 216px); }
  .rail-scrim { background: transparent; }
  :root.drawer-open #dock,
  :root.drawer-open .underbar,
  :root.drawer-open .canvas__hint { visibility: hidden; }
  .rail__done {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; align-self: center;
    min-height: 44px; min-width: 64px; padding: 0 16px; margin-left: 4px;
    border: 0; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-weight: 700; font-size: 14.5px;
  }
  /* nothing a finger types into in the sheet is under 16px (iOS focus zoom) */
  .rail .field__input { font-size: 16px; }
}

/* the logo chooser stands ON the chat bar on a phone (js/logo-picker.js): a
   floating sheet, so all four corners are round */
.logopick[data-stand="dock"] {
  border-radius: var(--r-lg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 50px -18px rgba(20, 22, 28, .45);
}
.logopick[data-stand="dock"] .logopick__foot { padding-bottom: 10px; }

/* THE FOUR LOGOS AS A SIDEWAYS CAROUSEL (owner, Oct 10, on his phone: the grid
   of four was cramped — "a nice scrolling sideways where you can see the logo
   full"). One logo per slide, as big as the sheet allows, its card under it and
   "Use this one" always whole; the next one peeks in from the side so it is
   plain there are more; the dots say which one is in view. Phones only: the
   sheet stands on the chat bar there (data-stand="dock"); a desktop keeps its
   four tiles beside the chat. */
.logopick__dots,
.logoprog { display: none; }
.logopick[data-stand="dock"] .logopick__grid {
  display: flex;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 12px;
  padding: 12px 8%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 8%;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.logopick[data-stand="dock"] .logopick__grid::-webkit-scrollbar { display: none; }
.logopick[data-stand="dock"] .pickt {
  flex: 0 0 84%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 12px;
  gap: 12px;
}
.logopick[data-stand="dock"] .pickt__logo { flex: 1 1 auto; height: auto; min-height: 120px; }
.logopick[data-stand="dock"] .pickt__img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.logopick[data-stand="dock"] .pickt__row { flex-direction: column; align-items: stretch; gap: 10px; }
.logopick[data-stand="dock"] .pickt__on { flex: 0 0 auto; }
.logopick[data-stand="dock"] .pickt__use { width: 100%; min-height: 48px; font-size: 16px; }
.logopick[data-stand="dock"] .logopick__dots {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 0 0 4px;
}
.logopick__dot {
  position: relative;
  /* the dot is 8px; the place to tap it is a finger's 44 */
  width: 44px; height: 44px;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.logopick__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--line);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.logopick__dot[aria-current="true"]::before { width: 20px; background: var(--ink); }
.logopick__count { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* drawing (Try 4 more): the card that says so, not four grey squares */
.logopick[data-stand="dock"][data-state="drawing"] .logopick__grid,
.logopick[data-stand="dock"][data-state="drawing"] .logopick__dots { display: none; }
.logopick[data-stand="dock"] .logopick__prog { padding: 16px; }
.logopick__prog:empty { display: none; }
.logopick[data-stand="dock"] .logoprog { display: block; }

/* the card that says the logos are being drawn (js/logo-picker.js drawingCard) */
.logoprog {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.logoprog__head { display: flex; align-items: center; gap: 10px; }
.logoprog__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.logoprog__bar {
  margin: 12px 0 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.logoprog__bar > i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mk-c, #00AEEF), var(--mk-m, #EC008C), var(--mk-y, #FFE600));
  transition: width .5s linear;
}
.logoprog__meta { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.logoprog__time { font-variant-numeric: tabular-nums; color: var(--ink-70); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .logoprog__bar > i { transition: none; } }

@media (max-width: 899px) {
  /* in the chat on a phone: the card, not the words and four grey squares */
  .logoprog { display: block; }
  .logogrid--wait,
  .logoq__drawtext { display: none; }
  /* while the chooser is open the chat bar is just the box you type in: the
     same four logos are not shown twice (owner, Oct 10) */
  #dock.has-logopick .dock__thread,
  #dock.has-logopick .dock__next,
  #dock.has-logopick .dock__foot { display: none; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  #textWindow { animation: none; }
}