/* Search and Tom, shared by every page. TOM FLOW FRONT 001-004 (1600×1200),
   in --hd. Grey ground #d8d8d8, logo top left, section title top right. */
.tb-layer {
  --tb-ground: #d8d8d8;
  --tb-mute: #7c7c7c;
  --tb-user: #e3e3e3;
  --tb-tom: #f4f4f4;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tb-ground);
  color: #000;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.22s linear;
}

.tb-layer.is-in { opacity: 1; }
.tb-layer[hidden] { display: none; }
html.tb-up { overflow: hidden; }

.tb-layer button,
.tb-layer a,
.tb-layer input,
.tb-layer textarea {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: -0.05em; /* em of its own size, not the parent px */
  text-decoration: none;
}

.tb-layer button,
.tb-layer a { cursor: pointer; }
.tb-layer :focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 6px; }
.tb-layer [data-icon] { display: block; }
.tb-layer [data-icon] svg { display: block; width: 100%; height: 100%; }

/* Head. */
.tb-head { position: relative; flex: none; height: calc(200 * var(--hd)); min-height: 120px; }

.tb-home {
  position: absolute;
  left: calc(66 * var(--hd));
  top: calc(32 * var(--hd));
  width: calc(22 * var(--hd));
  height: calc(49 * var(--hd));
  min-width: 16px;
  min-height: 36px;
}

.tb-home svg { display: block; width: 100%; height: 100%; }

.tb-title {
  position: absolute;
  top: calc(17.25 * var(--hd));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--hd));
  margin: 0;
  font-size: calc(65.6 * var(--hd));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.tb-x {
  position: absolute !important;
  display: grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
}

.tb-x [data-icon] { width: max(14px, calc(22 * var(--hd))); height: max(14px, calc(22 * var(--hd))); }

/* Tom's face: black disc, two eyes that blink now and then. */
.tb-face { display: block; flex: none; }
.tb-face .tb-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: tb-blink 5.5s infinite; }
.tb-face.is-busy .tb-eye { animation: tb-think 0.9s ease-in-out infinite; }

@keyframes tb-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

@keyframes tb-think {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-18%) scaleY(0.8); }
}

/* ---- Search (001) ---- */
.tb-search .tb-title { right: calc(150 * var(--hd)); }
.tb-search .tb-x { right: calc(51 * var(--hd)); top: calc(57 * var(--hd) - 22px); }

.tb-s-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 calc(160 * var(--hd)) calc(80 * var(--hd));
}

.tb-s-field {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--hd));
  margin-top: calc(340 * var(--hd));
  transition: margin 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tb-search.is-active .tb-s-field { margin-top: calc(20 * var(--hd)); }

.tb-s-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: max(30px, calc(82 * var(--hd))) !important;
  line-height: 1.1;
  outline: none;
}

.tb-s-input:focus-visible,
.tb-input:focus-visible { outline: none !important; }

.tb-s-input::placeholder { color: var(--tb-mute); opacity: 1; }
.tb-s-input::-webkit-search-cancel-button { display: none; }

.tb-s-clear {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08) !important;
  display: grid !important;
  place-items: center;
}

.tb-s-clear [data-icon] { width: 14px; height: 14px; }
.tb-s-clear[hidden] { display: none !important; }

.tb-s-hint { margin: calc(26 * var(--hd)) 0 0; color: var(--tb-mute); font-size: max(13px, calc(16 * var(--hd))); }
.tb-s-hint kbd { font: inherit; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.07); }

.tb-s-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(18 * var(--hd)); }
.tb-s-label {
  margin: calc(48 * var(--hd)) 0 calc(16 * var(--hd));
  color: var(--tb-mute);
  font-size: max(12px, calc(14 * var(--hd)));
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.tb-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: max(36px, calc(44 * var(--hd)));
  padding: 0 max(14px, calc(20 * var(--hd))) !important;
  border-radius: 999px;
  background: #fff !important;
  font-size: max(13px, calc(17 * var(--hd))) !important;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.tb-chip:hover,
.tb-chip:focus-visible { background: #000 !important; color: #fff !important; }
.tb-chip [data-icon] { width: 16px; height: 16px; }
.tb-chip.is-quiet { background: rgba(255, 255, 255, 0.55) !important; }

/* Results. */
.tb-ask {
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: calc(40 * var(--hd));
  padding: 14px 20px !important;
  border-radius: 999px;
  background: #fff !important;
  font-size: max(15px, calc(20 * var(--hd))) !important;
  text-align: left;
}

.tb-ask:hover,
.tb-ask:focus-visible,
.tb-ask.is-on { background: #000 !important; color: #fff !important; }
.tb-ask .tb-ask-q { color: var(--tb-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ask:hover .tb-ask-q,
.tb-ask:focus-visible .tb-ask-q,
.tb-ask.is-on .tb-ask-q { color: #bdbdbd; }
.tb-ask .tb-go { margin-left: auto; width: 20px; height: 20px; flex: none; }
.tb-ask .tb-lock { width: 18px; height: 18px; flex: none; }

.tb-models {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(24 * var(--hd));
}

.tb-model,
.tb-shoot {
  display: block;
  border-radius: 12px;
  outline-offset: 4px;
}

.tb-model .tb-img,
.tb-shoot .tb-img {
  display: block;
  overflow: hidden;
  border-radius: calc(14 * var(--hd));
  background: rgba(0, 0, 0, 0.06);
}

.tb-model .tb-img { aspect-ratio: 282 / 427; }
.tb-shoot .tb-img { aspect-ratio: 4 / 3; }

.tb-model img,
.tb-shoot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tb-model:hover img,
.tb-shoot:hover img,
.tb-model:focus-visible img,
.tb-shoot:focus-visible img { transform: scale(1.04); }

.tb-model p,
.tb-shoot p { margin: 10px 0 0; font-size: max(13px, calc(16 * var(--hd))); }
.tb-model small,
.tb-shoot small { display: block; margin-top: 3px; color: var(--tb-mute); font-size: max(11px, calc(13 * var(--hd))); }

.tb-shoots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(24 * var(--hd));
}

.tb-pages { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-none { margin: calc(40 * var(--hd)) 0 0; color: var(--tb-mute); font-size: max(14px, calc(18 * var(--hd))); }
mark.tb-hit { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- Tom (002-004) ---- */
.tb-tom .tb-title { right: calc(102 * var(--hd)); top: calc(19 * var(--hd)); }
.tb-tom .tb-title .tb-face { width: calc(66 * var(--hd)); height: calc(66 * var(--hd)); min-width: 40px; min-height: 40px; }
.tb-tom .tb-x { right: calc(47 * var(--hd) - 22px + 8px); top: calc(47 * var(--hd) - 22px); }

/* History: white disc at 54,131 (45). */
.tb-hist-btn {
  position: absolute !important;
  left: calc(54 * var(--hd));
  top: calc(131 * var(--hd));
  display: grid !important;
  place-items: center;
  width: max(40px, calc(45 * var(--hd)));
  height: max(40px, calc(45 * var(--hd)));
  border-radius: 50%;
  background: #fff !important;
}

.tb-hist-btn [data-icon] { width: 44%; height: 44%; }

.tb-credits {
  position: absolute;
  right: calc(102 * var(--hd));
  top: calc(104 * var(--hd));
  color: var(--tb-mute);
  font-size: max(12px, calc(14 * var(--hd)));
  white-space: nowrap;
}

.tb-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.tb-thread {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(6 * var(--hd)) calc(49 * var(--hd)) calc(40 * var(--hd)) calc(98 * var(--hd));
  scroll-behavior: smooth;
}

/* Greeting, 002: x 160, two lines of 82. The name line is grey so the
   question reads first; both pass contrast on the grey ground. */
.tb-hello {
  margin: calc(174 * var(--hd)) 0 0 calc(62 * var(--hd));
  font-size: max(34px, calc(82 * var(--hd)));
  font-weight: 500;
  line-height: 0.9;
}

.tb-hello span { display: block; }
.tb-hello span:first-child { color: var(--tb-mute); }

.tb-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: calc(56 * var(--hd)) 0 0 calc(62 * var(--hd));
  max-width: calc(1100 * var(--hd));
}

/* Messages, 004: user right (bubble ends 1481, avatar 50 at 1501), Tom
   left (avatar 50 at 98, bubble from 167). */
.tb-msg {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--hd));
  margin-top: calc(44 * var(--hd));
}

.tb-msg:first-child { margin-top: 0; }
.tb-msg.is-user { flex-direction: row-reverse; }

.tb-av {
  flex: none;
  display: grid;
  place-items: center;
  width: max(34px, calc(50 * var(--hd)));
  height: max(34px, calc(50 * var(--hd)));
  margin-top: calc(12 * var(--hd));
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: max(12px, calc(17 * var(--hd)));
}

.tb-av .tb-face { width: 100%; height: 100%; }

.tb-bubble {
  max-width: min(calc(964 * var(--hd)), 100%);
  padding: calc(24 * var(--hd)) calc(35 * var(--hd));
  border-radius: calc(37 * var(--hd));
  background: var(--tb-tom);
  font-size: max(15px, calc(24 * var(--hd)));
  font-weight: 400;
  line-height: 1.32;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tb-msg.is-user .tb-bubble { max-width: calc(721 * var(--hd)); background: var(--tb-user); }
.tb-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--hd)); min-width: 0; max-width: calc(964 * var(--hd)); }
.tb-msg.is-user .tb-col { align-items: flex-end; }

.tb-typing { display: inline-flex; gap: 6px; padding: 6px 0; }
.tb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9a9a9a; animation: tb-dot 1s infinite ease-in-out; }
.tb-typing i:nth-child(2) { animation-delay: 0.15s; }
.tb-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tb-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.tb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-opts.is-done { display: none; }

/* Model card, when Tom recognises a name. */
.tb-mcard {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 10px 22px 10px 10px !important;
  border-radius: 20px;
  background: #fff !important;
}

.tb-mcard img { width: 58px; height: 78px; border-radius: 12px; object-fit: cover; }
.tb-mcard p { margin: 0; font-size: max(14px, calc(18 * var(--hd))); }
.tb-mcard small { display: block; margin-top: 4px; color: var(--tb-mute); font-size: max(12px, calc(13 * var(--hd))); }

/* Plan card, before generating. */
.tb-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  margin: 0;
  padding: 20px 26px;
  border-radius: 24px;
  background: #fff;
  font-size: max(14px, calc(17 * var(--hd)));
}

.tb-plan dt { color: var(--tb-mute); }
/* On desktop the brief on the right already shows the plan. */
@media (min-width: 801px) { .tb-plan { display: none; } }
.tb-plan dd { margin: 0; }

.tb-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: max(40px, calc(48 * var(--hd)));
  padding: 0 max(18px, calc(26 * var(--hd))) !important;
  border-radius: 999px;
  background: #000 !important;
  color: #fff !important;
  font-size: max(14px, calc(17 * var(--hd))) !important;
  white-space: nowrap;
}

.tb-btn:hover { opacity: 0.85; }
.tb-btn:disabled { opacity: 0.3; cursor: default; }
.tb-btn [data-icon] { width: 18px; height: 18px; }
.tb-btn.is-ghost { background: #fff !important; color: #000 !important; }

/* Progress while generating. */
.tb-prog {
  width: min(calc(520 * var(--hd)), 100%);
  min-width: 220px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
}

.tb-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: #000; transition: width 0.3s linear; }
.tb-note { margin: 0; color: var(--tb-mute); font-size: max(13px, calc(15 * var(--hd))); }

/* Results. */
.tb-results {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 12px;
  width: min(calc(820 * var(--hd)), 100%);
  min-width: 240px;
}

.tb-results.is-video { --n: 1; width: auto; }
.tb-results figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #cfcfcf; }
.tb-results img { display: block; width: 100%; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; }
.tb-results video { display: block; max-width: 100%; max-height: 62vh; border-radius: 18px; }
.tb-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Brief, to the right on desktop. */
.tb-brief {
  flex: none;
  width: calc(380 * var(--hd));
  min-width: 300px;
  margin: 0 calc(49 * var(--hd)) calc(30 * var(--hd)) 0;
  padding: 26px 28px;
  align-self: flex-start;
  border-radius: 28px;
  background: #fff;
  font-size: max(14px, calc(16 * var(--hd)));
}

.tb-brief[hidden] { display: none; }

.tb-brief h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  font-size: max(16px, calc(20 * var(--hd)));
  font-weight: 500;
}

.tb-brief h3 small { color: var(--tb-mute); font-size: 0.75em; font-weight: 500; }

.tb-brief dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin: 0; }
.tb-brief dt { color: var(--tb-mute); }
.tb-brief dd { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.tb-brief dd.is-empty { color: #c2c2c2; }
.tb-brief dd img { width: 28px; height: 38px; border-radius: 6px; object-fit: cover; }
.tb-brief dd button { color: var(--tb-mute) !important; font-size: 0.85em !important; margin-left: auto !important; }
.tb-brief dd button:hover { color: #000 !important; }

.tb-cost {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 16px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}

.tb-cost span:last-child { color: var(--tb-mute); }
.tb-brief .tb-btn { width: 100%; }

/* Composer: white band at the bottom (002), lower than the mockup and it
   grows with the text. */
.tb-comp {
  position: relative;
  flex: none;
  background: #fff;
  padding: calc(34 * var(--hd)) calc(49 * var(--hd)) calc(24 * var(--hd)) calc(155 * var(--hd));
}

.tb-comp-row { display: flex; align-items: flex-end; gap: calc(16 * var(--hd)); }

.tb-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.25em;
  max-height: 30vh;
  resize: none;
  outline: none;
  font-size: max(18px, calc(40 * var(--hd))) !important;
  line-height: 1.25 !important;
  overflow-y: auto;
}

.tb-input::placeholder { color: #b5b5b5; }
/* Prompter: the site tracking on the text and on the placeholder too
   (Safari does not carry it into ::placeholder by itself). */
.tb-input,
.tb-input::placeholder,
.tb-input::-webkit-input-placeholder { letter-spacing: -0.05em !important; font-family: "Inter 18pt", sans-serif; font-weight: 500; }

.tb-tool {
  flex: none;
  display: grid !important;
  place-items: center;
  width: max(40px, calc(52 * var(--hd)));
  height: max(40px, calc(52 * var(--hd)));
  border-radius: 50%;
  color: #000;
}

.tb-tool:hover { background: #f1f1f1 !important; }
.tb-tool [data-icon] { width: 42%; height: 42%; }
.tb-tool.is-rec { background: #000 !important; color: #fff; animation: tb-rec 1.2s infinite; }
@keyframes tb-rec { 50% { opacity: 0.6; } }

.tb-send { background: #000 !important; color: #fff !important; }
.tb-send:hover { background: #333 !important; }
.tb-send:disabled { background: #d6d6d6 !important; cursor: default; }

.tb-comp-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: calc(14 * var(--hd));
  color: var(--tb-mute);
  font-size: max(12px, calc(13 * var(--hd)));
}

.tb-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tb-files[hidden] { display: none; }
.tb-file { position: relative; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: #eee; }
.tb-file img { width: 100%; height: 100%; object-fit: cover; }
.tb-file button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, 0.7) !important; color: #fff !important; font-size: 12px !important; line-height: 20px; }

/* @ picker. */
.tb-pick {
  position: absolute;
  left: calc(155 * var(--hd));
  bottom: calc(100% + 10px);
  z-index: 2;
  width: min(360px, calc(100% - 40px));
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.tb-pick[hidden] { display: none; }

.tb-pick button {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px !important;
  border-radius: 12px;
  text-align: left;
}

.tb-pick button.is-on,
.tb-pick button:hover { background: #f1f1f1 !important; }
.tb-pick img { width: 34px; height: 46px; border-radius: 8px; object-fit: cover; }
.tb-pick small { display: block; color: var(--tb-mute); font-size: 12px; }

/* Locked for Free. */
.tb-lockcard {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.tb-lockcard [data-icon] { width: 28px; height: 28px; }
.tb-lockcard p { flex: 1 1 320px; margin: 0; font-size: max(17px, calc(26 * var(--hd))); line-height: 1.25; }
.tb-lockcard p small { display: block; margin-top: 6px; color: var(--tb-mute); font-size: 0.62em; }
.tb-lockcard.is-nudge { animation: tb-nudge 0.4s ease; }
@keyframes tb-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* History drawer. */
.tb-hist {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  padding: calc(131 * var(--hd)) 24px 24px calc(54 * var(--hd));
  background: #fff;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
  transform: translateX(-102%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tb-hist.is-in { transform: none; }
.tb-hist h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; font-size: 20px; font-weight: 500; }
.tb-hist-list { flex: 1 1 auto; overflow-y: auto; margin: 16px -10px 0; padding: 0; list-style: none; }
.tb-hist-list button { display: block; width: 100%; padding: 12px 10px !important; border-radius: 12px; text-align: left; }
.tb-hist-list button:hover,
.tb-hist-list button.is-on { background: #f1f1f1 !important; }
.tb-hist-list small { display: block; margin-top: 3px; color: var(--tb-mute); font-size: 12px; }
.tb-hist-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tb-hist-empty { color: var(--tb-mute); font-size: 14px; }

.tb-sheet-btn { display: none !important; }

.tb-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 60;
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transform: translateX(-50%);
}

.tb-toast[hidden] { display: none; }

/* Lock mark on the menu's Tom pill for Free. */
.fp-nav-tom .tb-navlock { display: inline-block; width: 14px; height: 14px; margin-left: 2px; }
.fp-nav-tom .tb-navlock svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .tb-layer,
  .tb-s-field,
  .tb-hist { transition: none; }
  .tb-face .tb-eye,
  .tb-typing i { animation: none; }
}

/* Narrow desktop: the brief moves under the thread's width. */
@media (max-width: 1100px) and (min-width: 801px) {
  .tb-brief { width: 300px; }
}

/* Tablet and phone. */
@media (max-width: 800px) {
  .tb-head { height: calc(118 * var(--m)); min-height: 0; }
  .tb-home { left: calc(45 * var(--m)); top: calc(40 * var(--m)); width: calc(22 * var(--m)); height: calc(48.5 * var(--m)); }
  .tb-title { top: calc(40 * var(--m)); font-size: calc(40 * var(--m)); }
  .tb-search .tb-title { right: calc(80 * var(--m)); }
  .tb-search .tb-x,
  .tb-tom .tb-x { right: calc(18 * var(--m)); top: calc(40 * var(--m)); }
  .tb-tom .tb-title { right: calc(80 * var(--m)); top: calc(36 * var(--m)); }
  .tb-tom .tb-title .tb-face { width: calc(44 * var(--m)); height: calc(44 * var(--m)); min-width: 0; min-height: 0; }
  .tb-hist-btn { left: calc(36 * var(--m)); top: calc(98 * var(--m)); width: 38px; height: 38px; }
  .tb-credits { right: calc(80 * var(--m)); top: calc(86 * var(--m)); font-size: 11px; }

  .tb-s-main { padding: 0 calc(28 * var(--m)) 40px; }
  .tb-s-field { margin-top: calc(220 * var(--m)); }
  .tb-search.is-active .tb-s-field { margin-top: 10px; }
  .tb-s-input { font-size: calc(34 * var(--m)) !important; }
  .tb-models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tb-shoots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .tb-body { overflow: hidden; }
  .tb-thread { padding: 16px calc(20 * var(--m)) 24px; }
  .tb-hello { margin: calc(40 * var(--m)) 0 0 calc(8 * var(--m)); font-size: calc(40 * var(--m)); }
  .tb-starters { margin: 28px 0 0 calc(8 * var(--m)); }
  .tb-msg { gap: 10px; margin-top: 22px; }
  .tb-av { width: 30px; height: 30px; margin-top: 6px; font-size: 11px; }
  .tb-bubble { padding: 12px 16px; border-radius: 20px; font-size: 15px; }
  .tb-msg.is-user .tb-bubble { max-width: 82vw; }
  .tb-col { max-width: calc(100% - 40px); }

  .tb-brief {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    width: auto;
    min-width: 0;
    margin: 0;
    max-height: 70%;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(calc(100% + 20px));
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .tb-brief.is-sheet { transform: none; }

  .tb-sheet-btn {
    display: inline-flex !important;
    position: absolute;
    right: calc(20 * var(--m));
    bottom: calc(100% + 10px);
    z-index: 2;
  }

  .tb-sheet-btn[hidden] { display: none !important; }

  .tb-comp { padding: 14px calc(16 * var(--m)) calc(12px + env(safe-area-inset-bottom, 0px)); }
  .tb-input { font-size: 17px !important; }
  .tb-comp-foot { display: none; }
  .tb-tool { width: 40px; height: 40px; }
  .tb-pick { left: 12px; }
  .tb-lockcard p { font-size: 16px; }
}

/* Actions after a result: copy, regenerate, download, Drafts, Save and
   Private / Public (Private by default). */
.tb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tb-acts.is-past .tb-vis { opacity: 0.7; }
.tb-act {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: max(34px, calc(40 * var(--hd)));
  padding: 0 max(12px, calc(16 * var(--hd))) !important;
  border-radius: 999px;
  background: #fff !important;
  font-size: max(13px, calc(16 * var(--hd))) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tb-act [data-icon] { width: 15px; height: 15px; }
.tb-act [data-icon] svg { display: block; width: 100%; height: 100%; }
.tb-act:hover, .tb-act:focus-visible { background: #000 !important; color: #fff !important; }
.tb-act.is-soon { opacity: 0.45; cursor: not-allowed; }
.tb-act.is-soon:hover { background: #fff !important; color: inherit !important; }
.tb-vis {
  display: inline-flex;
  height: max(34px, calc(40 * var(--hd)));
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.tb-vis button {
  padding: 0 max(12px, calc(14 * var(--hd))) !important;
  border-radius: 999px;
  font-size: max(13px, calc(16 * var(--hd))) !important;
  color: #7c7c7c !important;
  cursor: pointer;
}
.tb-vis button[aria-checked="true"] { background: #000 !important; color: #fff !important; }

/* Drag & drop of references onto Tom's composer. */
.tb-comp { position: relative; }
.tb-drop {
  display: none; position: absolute; inset: 8px; margin: 0; z-index: 3;
  align-items: center; justify-content: center; text-align: center;
  border: 1px dashed #000; border-radius: 14px; background: rgba(255,255,255,.94);
  font-size: 14px; letter-spacing: -0.05em; color: #000; pointer-events: none;
}
.tb-comp.is-drop .tb-drop { display: flex; }