/* appinventor.css – Android 2.x (Gingerbread) look for the App Inventor web runtime.
   All sizes use var(--dp) so the form scales like Android's compatibility mode. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}
.ai-form {
  --dp: 1px;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  font-family: "Droid Sans", Roboto, "Segoe UI", Arial, sans-serif;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.ai-form > .ai-box { width: 100%; height: 100%; }
.ai-form.ai-scroll > .ai-box { overflow-y: auto; scrollbar-width: none; }
.ai-form.ai-scroll > .ai-box::-webkit-scrollbar { display: none; }
.ai-box { display: flex; min-width: 0; min-height: 0; box-sizing: border-box; }
.ai-vertical { flex-direction: column; align-items: flex-start; }
.ai-horizontal { flex-direction: row; align-items: flex-start; }
.ai-comp { box-sizing: border-box; min-width: 0; min-height: 0; }

/* text */
.ai-text { display: block; line-height: 1.33; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-text:empty::before { content: "\200b"; }
.ai-label { display: flex; align-items: flex-start; padding: calc(2 * var(--dp)) calc(2 * var(--dp)); }
.ai-label.ai-nomargin { padding: 0; }

/* Button: default = Gingerbread btn_default (9-patch with transparent inset), coloured = flat */
.ai-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent center / 100% 100% no-repeat;
  color: #000;
  font: inherit;
  padding: calc(7 * var(--dp)) calc(10 * var(--dp)) calc(9 * var(--dp));
  min-height: calc(48 * var(--dp));
  min-width: calc(64 * var(--dp));
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.ai-button > .ai-text { position: relative; z-index: 1; }
.ai-button:not(.ai-colored):not(.ai-imaged)::before {
  content: "";
  position: absolute;
  inset: calc(3 * var(--dp)) calc(3 * var(--dp)) calc(4 * var(--dp));
  border: 1px solid #7d7d7d;
  border-radius: calc(5 * var(--dp));
  background: linear-gradient(#fbfbfb, #e6e6e6 45%, #d2d2d2 55%, #dcdcdc);
  box-shadow: inset 0 1px 0 #fff;
}
.ai-button:not(.ai-colored):not(.ai-imaged):active::before {
  border-color: #c76d00;
  background: linear-gradient(#ffd25c, #ffb52b 45%, #ff9800 55%, #ffa51f);
}
.ai-button:not(.ai-colored):not(.ai-imaged):focus-visible::before {
  border-color: #e88b00;
  background: linear-gradient(#fff0b8, #ffe080 45%, #ffcc33 55%, #ffd75a);
}
/* BackgroundColor set: TextViewUtil.setBackgroundColor replaced the 9-patch with a flat colour,
   which keeps the 9-patch padding but drops the minimum size and the pressed state */
.ai-button.ai-colored { min-height: 0; min-width: 0; }
.ai-button.ai-imaged { padding: 0; min-height: 0; min-width: 0; }
.ai-button:disabled { color: #8a8a8a; cursor: default; }

/* TextBox */
.ai-textbox { display: flex; padding: calc(2 * var(--dp)); }
.ai-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: calc(8 * var(--dp)) calc(8 * var(--dp));
  border: 1px solid #888;
  border-radius: calc(4 * var(--dp));
  background: #fff;
  color: #000;
  outline: none;
}
.ai-input:focus { border-color: #ff9a00; box-shadow: 0 0 0 calc(2 * var(--dp)) rgba(255, 154, 0, 0.45); }
.ai-input::placeholder { color: #9a9a9a; }
.ai-checkbox { display: flex; align-items: center; gap: calc(4 * var(--dp)); padding: calc(4 * var(--dp)); }
.ai-checkbox input { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); margin: 0; }
.ai-image { display: block; object-fit: contain; }
.ai-slider { display: flex; align-items: center; padding: 0 calc(8 * var(--dp)); }
.ai-slider input { flex: 1 1 auto; min-width: 0; }

/* Canvas */
.ai-canvas {
  position: relative;
  overflow: hidden;
  touch-action: none;
  background: #fff center / 100% 100% no-repeat;
  cursor: crosshair;
}
.ai-canvas > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* Notifier */
.ai-toast {
  position: absolute;
  left: 50%;
  bottom: calc(48 * var(--dp));
  transform: translateX(-50%);
  max-width: 80%;
  padding: calc(8 * var(--dp)) calc(14 * var(--dp));
  border: 1px solid #555;
  border-radius: calc(4 * var(--dp));
  background: rgba(38, 38, 38, 0.92);
  color: #fff;
  font-size: calc(14 * var(--dp));
  z-index: 50;
  transition: opacity 0.4s;
}
.ai-toast--out { opacity: 0; }
.ai-dialog-shade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 60;
}
.ai-dialog {
  min-width: 60%;
  max-width: 90%;
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #666;
  border-radius: calc(4 * var(--dp));
  font-size: calc(16 * var(--dp));
}
.ai-dialog-title { padding: calc(10 * var(--dp)) calc(12 * var(--dp)); border-bottom: 1px solid #555; font-size: calc(18 * var(--dp)); }
.ai-dialog-msg { padding: calc(12 * var(--dp)); }
/* AlertDialog messages scroll when they are longer than the screen (runtime error texts) */
.ai-dialog { display: flex; flex-direction: column; max-height: 90%; }
.ai-dialog-msg { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; }
.ai-dialog--error .ai-dialog-msg { font-size: calc(14 * var(--dp)); }
.ai-dialog-field { display: flex; padding: 0 calc(12 * var(--dp)) calc(12 * var(--dp)); }
.ai-dialog-field .ai-input { font-size: calc(18 * var(--dp)); }
.ai-input { -webkit-user-select: text; user-select: text; }
.ai-dialog-buttons { display: flex; background: #bbb; padding: calc(4 * var(--dp)) calc(4 * var(--dp)) 0; }
.ai-dialog-buttons .ai-button { flex: 1 1 0; }

/* Theme with a title bar (Gingerbread Theme): 25 dp grey bar with the window title */
.ai-form.ai-has-title { display: flex; flex-direction: column; }
.ai-form.ai-has-title > .ai-box { height: auto; flex: 1 1 0; }
.ai-titlebar {
  flex: 0 0 auto;
  height: calc(25 * var(--dp));
  line-height: calc(25 * var(--dp));
  padding: 0 calc(5 * var(--dp));
  background: linear-gradient(#7b7b7b, #575757 50%, #484848 51%, #3a3a3a);
  border-bottom: 1px solid #1c1c1c;
  color: #fff;
  font-size: calc(14 * var(--dp));
  font-weight: bold;
  text-shadow: 0 0 calc(2.75 * var(--dp)) #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Form.BackgroundImage: stretched over the ScrollView, does not scroll with the content */
.ai-box.ai-bgimage { background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; }

/* ListPickerActivity: full-screen dark ListActivity with simple_list_item_1 rows */
.ai-picker {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #000;
}
.ai-picker-list { flex: 1 1 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ai-picker-list::-webkit-scrollbar { display: none; }
.ai-picker-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(64 * var(--dp));
  margin: 0;
  padding: 0 calc(6 * var(--dp));
  border: 0;
  border-bottom: 1px solid #3a3a3a;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: calc(22 * var(--dp));
  text-align: left;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.ai-picker-item:active { background: linear-gradient(#ffc04a, #ff9b00); color: #000; }
.ai-picker-item:focus-visible { background: linear-gradient(#ffcf6a, #ffb22e); color: #000; }