/* Layout for the Text Completions sketch.
   Base rules (down to the row classes) reproduce the OpenProcessing layout
   exactly: only layout properties were moved here from src/initUI.js — the
   colours, fonts, radii and paddings that were inline stay inline.
   The body.mode-desktop / body.mode-mobile sections that follow may also set
   sizes and spacing (font-size, padding, min-height…) for anything that must
   differ by mode, because an inline style cannot vary by mode. */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#base-container {
  display: flex;
  flex-direction: row;
  margin: auto;
  max-width: 100%;
  width: 80%;
  height: 80%;
  justify-content: center;
  gap: 10px;
}

/* Empty flex slot kept from the original (its unitless width was ignored). */
#main-ui-container {
  display: flex;
  flex-direction: row;
  margin: auto;
  max-width: 100%;
  height: 100%;
}

#combined-container {
  display: flex;
  flex-direction: row;
  flex: 3;
  margin: 0 20px;
  gap: 10px;
}

#ai_instructions-container {
  display: flex;
  flex-direction: column;
  flex: 8;
}

#instructions_input {
  display: flex;
  flex-grow: 1;
  font-size: 24px;
}

#controls {
  display: flex;
  flex-direction: row;
}

#start_button,
#stop_button,
#reset_button {
  flex: 1;
}

#optionsGraphic-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#plus_sign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#temperature-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#temperature_dial {
  width: 80%;
}

#completionOptions-container {
  display: flex;
  flex-direction: column;
  flex: 3;
}

#model_name_label {
  display: flex;
}

#completions_label {
  display: flex;
  font-size: 24px;
}

#char_count_label,
#token_count_label {
  padding: 5px 5px;
}

#completions {
  display: flex;
  flex-direction: column;
}

/* One candidate row: container, token button, percentage. Background colour
   is set per row in initUI.js (probToColor). */
.completion_button_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 0;
  padding: 1px 0;
  width: 100%;
  height: 100%;
}

.completion_button_token {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
}

.completion_button_prob {
  padding: 0 5px;
  margin-left: 10px;
}

/* The "everything else" row that closes the list (createRemainderRow, initUI.js). */
.completion_remainder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 0;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
}

#coverage_label {
  display: block;
}

/* ---- Stand-alone controls: hidden in presentation, shown per mode below ---- */
#preset_nav,
#options_toggle {
  display: none;
}

body.mode-desktop #preset_nav {
  display: flex;
  gap: 6px;
  padding: 5px 5px 0;
}

body.mode-desktop #preset_prev,
body.mode-desktop #preset_next {
  min-width: 36px;
  font-size: 18px;
  line-height: 1;
}

/* Same row as the arrows, at its far right. */
body.mode-desktop #options_toggle {
  display: block;
  margin-left: auto;
  align-self: center;
  font-size: 12px;
  padding: 4px 8px;
}

/* ---- Mobile stand-alone: stacked, full width, pinned prompt, scrolling list ---- */
body.mode-mobile {
  height: 100dvh;
  align-items: stretch;
}

body.mode-mobile #base-container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 0;
}

/* Not rendered on a phone: the empty slot, the "+", the dial, the labels. */
body.mode-mobile #main-ui-container,
body.mode-mobile #optionsGraphic-container,
body.mode-mobile #promptLabel,
body.mode-mobile #model_name_label {
  display: none !important; /* beats the inline display the show/hide helpers set */
}

body.mode-mobile #combined-container {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  gap: 6px;
}

body.mode-mobile #ai_instructions-container {
  flex: none;
}

body.mode-mobile #preset_nav {
  display: flex;
  gap: 8px;
  padding: 4px;
}

body.mode-mobile #preset_prev,
body.mode-mobile #preset_next {
  flex: 1;
  min-width: 44px;
  min-height: 34px;
  font-size: 20px;
  line-height: 1;
}

/* Pinned prompt: 3 rows, 6 while editing. content-box: font-size × line-height × rows; padding and border are added on top. */
body.mode-mobile #instructions_input {
  flex-grow: 0;
  font-size: 18px;
  line-height: 1.3;
  height: calc(3 * 1.3 * 18px);
  transition: height 120ms ease-out;
}

body.mode-mobile #instructions_input:focus {
  height: calc(6 * 1.3 * 18px);
}

@media (prefers-reduced-motion: reduce) {
  body.mode-mobile #instructions_input { transition: none; }
}

body.mode-mobile #char_count_label,
body.mode-mobile #token_count_label {
  padding: 2px 5px;
}

body.mode-mobile #start_button,
body.mode-mobile #stop_button,
body.mode-mobile #reset_button {
  min-height: 40px;
  font-size: 13px;
}

body.mode-mobile #completionOptions-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.mode-mobile #completions_label {
  font-size: 16px;
}

body.mode-mobile .completion_button_container,
body.mode-mobile .completion_remainder {
  min-height: 44px;
}

body.mode-mobile .completion_button_token {
  font-size: 18px;
}

/* The status shares one line with "Characters left" (initUI.js) so a message
   arriving mid-demo cannot resize the panel: the row exists either way, and
   #char_count_label still hides in presentation/mobile beside it. */
#status_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#generation_status {
  flex: 1;
  min-width: 0;
}

/* The end-of-text candidate: a real row with a real probability, marked as the
   one that finishes the completion rather than adding text. */
.completion_endoftext {
  outline: 1px dashed rgba(60, 60, 60, 0.5);
}