/* Expanded, consistent layout. These rules always apply and the whole shell is
   scaled up with JS (see app.js) so the studio fills the screen at 100% zoom. */

.shell { min-height: 0; }

header { height: 62px; padding: 6px 18px 0; align-items: center; }
.brandArea { gap: 12px; align-items: center; }
.brand { width: 52px; height: 48px; }
.brand img { width: 52px; height: 48px; }
.toolbar { gap: 4px; margin-top: 0; font-size: 12px; }
.toolbar button { gap: 3px; }
.toolbar .iconBtn { width: 15px; height: 15px; }
.toolbar img, .toolbar .iconBtn img { width: 15px; height: 15px; }
.toolbar .zoomBtn img { width: 14px; height: 14px; }

/* credits card: the renewal line lives INSIDE the card */
.credits {
  width: auto; min-width: 104px; height: auto; margin: 0;
  border: 2px solid #000; border-radius: 10px; box-shadow: 3px 3px #000;
  padding: 4px 8px 5px; position: relative; display: flex;
  flex-direction: column; align-items: center; gap: 2px;
}
.creditTop { gap: 4px; font-size: 12px; }
.creditTop img { width: 12px; height: 12px; }
.credits small {
  position: static; display: block; width: 100%; font-size: 6.5px;
  line-height: 1; text-align: center; white-space: nowrap;
}

main {
  height: calc(100% - 62px);
  grid-template-columns: 178px minmax(0, 1fr) 62px;
  gap: 12px; padding: 0 18px 10px;
}

.leftPanel, .rail { border-width: 3px; border-radius: 20px; box-shadow: 5px 5px #000; }
.leftPanel { padding: 14px 8px 10px; gap: 8px; }
.panelSection { margin-bottom: 8px; }
.panelLabel {
  font-size: 10px; margin: 0 0 5px 6px; display: flex; align-items: center;
  gap: 5px; position: static;
}
.help {
  position: static; transform: none; order: 2;
  width: 11px; height: 11px; line-height: 0; font-size: 0; flex: none;
}
.help img { width: 11px; height: 11px; display: block; filter: brightness(0) invert(1); }


.uploadBox { height: 88px; margin: 0 4px; border-width: 2px; border-radius: 12px; }
.uploadBox strong { font-size: 14px; }
.uploadBox p { font-size: 6px; margin: 1px 0 5px; }
.uploadIcon { width: 22px; height: 22px; border-radius: 6px; }
.uploadIcon img { width: 14px; height: 14px; }
.thumbs { gap: 4px; margin: 6px 4px 0; min-height: 30px; }
.thumb { height: 30px; }

.choices { gap: 4px; margin: 0 4px; }
.choices button {
  height: 24px; border-width: 2px; border-radius: 7px; box-shadow: 1px 1px #000;
  font-size: 8px; padding: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05;
}
.fieldHint { font-size: 6px; margin: 3px 6px 0; }
.sizes { margin-top: 6px; padding-bottom: 0; }
.sizes button { position: relative; height: 30px; }
/* "recommended" sits inside its own button, not floating above the row */
.sizes .recommended:after {
  content: 'recommended'; position: static; transform: none;
  display: block; font-size: 5.5px; margin-top: 2px; line-height: 1;
  white-space: nowrap; color: inherit; opacity: .8;
}

.generationCost {
  font-size: 8px; font-weight: 900; color: #fff; opacity: .9;
  margin: 22px 6px 4px; text-align: center;
}
.generation {
  height: 32px; margin: 0 4px; border-width: 2px; border-radius: 8px;
  box-shadow: 2px 2px #000; font-size: 11px;
}

.priceRow { margin-top: auto; padding-top: 14px; grid-template-columns: 1fr 52px; gap: 5px; }
.priceRow strong { height: 24px; border-radius: 6px; font-size: 7px; }
.priceRow button { height: 24px; border-width: 2px; border-radius: 6px; font-size: 8px; }

.stageWrap { padding-top: 2px; }
.stage { height: calc(100% - 6px); border-width: 3px; border-radius: 22px; box-shadow: 5px 5px #000; background-size: 26px 26px; }
.empty { font-size: 15px; }
.watermark { width: 74px; right: 16px; bottom: 14px; }

.rail { height: calc(100% - 8px); margin-top: 0; justify-content: space-evenly; }
.rail button { width: 52px; height: 72px; gap: 4px; }
.rail button img { width: 26px; height: 26px; }
.rail button b { font-size: 7px; }

/* ---------- generated model + notes ---------- */
.modelWrap { position: relative; display: inline-block; line-height: 0; }
.modelWrap .modelImage { max-width: 100%; max-height: 100%; }
.canvasLayer { padding: 6%; }

.noteMarker {
  position: absolute; z-index: 8; transform: translate(-50%, -100%);
  min-width: 22px; max-width: 150px; border: 2px solid #000; border-radius: 7px;
  background: #fff4a3; color: #000; padding: 4px 6px; margin-top: -10px;
  font: 900 8px Cairo, Arial, sans-serif; box-shadow: 2px 2px #000;
  text-align: center; white-space: pre-wrap; cursor: default;
}
/* arrow pointing exactly at the picked spot */
.noteMarker:after,
.noteMarker:before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.noteMarker:before { bottom: -11px; border-top: 11px solid #000; }
.noteMarker:after { bottom: -8px; border-top: 9px solid #fff4a3; }

.noteTools {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px;
}
.noteTools button {
  width: 14px; height: 14px; padding: 0; border: 2px solid #000; border-radius: 5px;
  background: #fbf3db; color: #000; font: 900 8px Cairo, Arial, sans-serif;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.noteTools button.del { background: #b71b1b; color: #fff; }

/* note cursor */
.stage.noteMode { cursor: none; }
#noteCursor {
  position: fixed; display: none; z-index: 99998; width: 26px; height: 26px;
  pointer-events: none; filter: drop-shadow(1px 1px 0 #000);
}

/* ---------- order modal ---------- */
.orderCard { width: 360px; }
.priceNote { margin: -6px 0 10px; font-size: 10px; font-weight: 700; color: #57524a; }
.payments { gap: 10px; align-items: center; }
.payments button { background: none; border: 0; padding: 0; height: 46px; }
.payments button.selected { outline: 0; }
.payments button img { max-height: 44px; max-width: 100%; transition: transform .15s, filter .15s; opacity: .6; }
.payments button.selected img { opacity: 1; transform: scale(1.06); }
.noteCard textarea {
  display: block; width: 100%; margin: 10px 0; border: 2px solid #000; border-radius: 8px;
  padding: 8px; font: inherit; background: #fff; resize: vertical;
}

/* ---------- style buttons: black text when idle, beige when selected ---------- */
#styles button { color: #000; background: #fbf3db; }
#styles button.active { background: #b71b1b; color: #fbf3db; }

/* ---------- draggable notes ---------- */
.noteMarker { cursor: grab; }
.noteMarker.dragging { cursor: grabbing; z-index: 20; }

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  html, body { overflow: hidden; }
  .shell { min-height: 0; height: 100dvh; }

  header {
    height: 76px; padding: 8px 12px 0;
    display: flex; align-items: center; justify-content: center; gap: 14px;
  }
  .brandArea { gap: 0; justify-content: center; }
  .brand, .brand img { width: 78px; height: 62px; }

  /* toolbar floats inside the top of the stage */
  .toolbar {
    position: fixed; top: 246px; left: 26px; right: 20px;
    z-index: 20; margin: 0; font-size: 13.5px; gap: 2px; color: #fff;
    font-weight: 800; overflow: hidden;
  }
  .toolbar button, .toolbar .bar, .toolbar .dash { color: #fff; }
  .toolbar img { filter: brightness(0) invert(1); width: 16px; height: 16px; }
  /* no zoom buttons on mobile — only the movement lock */
  .toolbar #zin, .toolbar #zout, .toolbar #zin + .dash { display: none; }
  .toolbar .lockBtn {
    border: 2px solid #000; border-radius: 999px; background: #fbf3db; color: #000;
    padding: 3px 10px; font-size: 12px; font-weight: 900;
  }
  .toolbar .lockBtn span { color: #000; }
  .toolbar .lockBtn.active { background: #c91d1d; }
  .toolbar .lockBtn.active span { color: #fbf3db; }

  /* credits chip sits in the header, to the right of the logo */
  .credits {
    position: static; z-index: auto;
    min-width: 0; width: auto; height: auto; padding: 6px 12px;
    border: 3px solid #000; border-radius: 999px;
    background: #c91d1d; box-shadow: 2px 2px #000;
    flex-direction: row; gap: 6px;
  }
  .creditTop { font-size: 14px; }
  .creditTop img { width: 15px; height: 15px; }
  .credits small { display: none; }


  main { display: block; height: auto; padding: 0 16px; gap: 0; }

  /* controls row: style + size on the left, upload on the right */
  .leftPanel {
    height: auto; background: none; border: 0; box-shadow: none;
    padding: 0; overflow: visible; color: #000;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
    align-items: start;
  }
  .leftPanel .uploadSection { grid-column: 2; grid-row: 1 / span 2; padding-top: 12px; }
  .leftPanel .panelSection:nth-of-type(2) { grid-column: 1; grid-row: 1; }
  .leftPanel .sizeSection { grid-column: 1; grid-row: 2; }
  .panelSection { margin-bottom: 0; }
  .panelLabel { color: #000; font-size: 13px; margin: 0 0 5px 2px; }
  .help img { filter: none; width: 10px; height: 10px; }
  .fieldHint { display: none; }

  /* upload becomes a wide red pill button */
  .uploadBox {
    height: 52px; margin: 0; border: 3px solid #000; border-radius: 999px;
    background: #c91d1d; color: #fbf3db; border-style: solid;
    box-shadow: 3px 3px #000;
    flex-direction: row; justify-content: center; gap: 10px;
  }
  .uploadBox strong { font-size: 20px; font-weight: 800; }
  .uploadBox p { display: none; }
  .uploadIcon { width: 30px; height: 30px; border-radius: 8px; background: #a81616; }
  .uploadIcon img { width: 18px; height: 18px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 6px 0; min-height: 0; }
  .thumb { height: 46px; border-width: 3px; border-radius: 10px; }

  .choices { margin: 0; gap: 8px; }
  .choices button {
    height: 42px; font-size: 15px; border-width: 3px; border-radius: 12px;
    box-shadow: 3px 3px #000; background: #c91d1d; color: #fbf3db;
  }
  .choices button.active { background: #fbf3db; color: #000; }
  #styles button { background: #c91d1d; color: #fbf3db; }
  #styles button.active { background: #fbf3db; color: #000; }
  .sizes { margin-top: 0; }
  .sizes button { height: 42px; }
  .sizes .recommended:after { display: none; }

  /* stage fills the rest of the screen, fully visible above the controls */
  .stageWrap {
    position: fixed; left: 16px; right: 16px; top: 232px; bottom: 190px; height: auto;
    padding: 0; z-index: 1;
  }
  .stage { height: 100%; border-width: 4px; border-radius: 26px; box-shadow: 5px 5px #000; touch-action: none; }
  .empty { font-size: 15px; margin-bottom: 0; }
  /* logo stays only at the top of the page */
  .watermark { display: none; }
  /* keep the generated model high enough to stay visible above the controls */
  .canvasLayer { padding: 10px; align-items: flex-start; }

  /* generation button sits right above the actions pill */
  .generationCost {
    position: fixed; left: 60px; right: 0; bottom: 172px; z-index: 21;
    margin: 0; text-align: left; font-size: 13px; font-weight: 900; color: #000;
  }
  .generation {
    position: fixed; left: 56px; right: 56px; bottom: 122px; z-index: 21;
    height: 46px; margin: 0; font-size: 21px; border-width: 3px; border-radius: 12px;
    box-shadow: 3px 3px #000;
  }

  /* bottom pill with actions */
  .rail {
    position: fixed; left: 24px; right: 24px; bottom: 60px; z-index: 20;
    height: 58px; margin: 0; flex-direction: row; border-radius: 999px;
    justify-content: space-between; gap: 4px; padding: 0 14px;
  }
  .rail button { width: auto; flex: 1; height: 50px; gap: 3px; }
  .rail button img { width: 24px; height: 24px; }
  .rail button b { font-size: 9px; }
  #share { order: 1; }
  #download { order: 2; }
  #note { order: 3; }


  /* price + buy at the very bottom */
  .priceRow {
    position: fixed; left: 60px; right: 60px; bottom: 16px; z-index: 21;
    margin: 0; padding: 0; grid-template-columns: 1fr 96px; gap: 8px;
  }
  .priceRow strong { height: 38px; font-size: 12px; border-radius: 10px; }
  .priceRow button { height: 38px; font-size: 14px; border-width: 2px; border-radius: 10px; background: #b11b1b; }
}