/* Yellow plastic walkie-talkie face-plate for ShafiAppCo Walkie (web + APK inject).
   Full-bleed: no outer border/radius that would shrink or scroll the viewport. */
:root {
  --bg0: #F0C41A;
  --bg1: #E8B810;
  --panel: #FFF3A8;
  --line: #C49212;
  --line-hot: #8A6A0C;
  --lcd: #1CFF4A;
  --lcd-dim: #0A7A28;
  --accent: #1A1A16;
  --accent-dim: #3A3420;
  --steel: #5A5340;
  --text: #1A1A16;
  --muted: #5A5340;
  --danger: #B71C1C;
  --ok: #1B7A2A;
  --ptt: #C62828;
  --ptt-hot: #E53935;
  color-scheme: light;
}

html,
body,
#root {
  background: #F0C41A !important;
  background-image:
    radial-gradient(circle at 20% 10%, #FFE566 0%, transparent 42%),
    radial-gradient(circle at 80% 90%, #D4A017 0%, transparent 45%),
    linear-gradient(165deg, #F7D645 0%, #F0C41A 45%, #E0B010 100%) !important;
  color: #1A1A16 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.app {
  background: linear-gradient(180deg, #F8D84E, #EBB50E) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 1px 0 #FFE97A,
    inset 0 -1px 0 #C49212 !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* hide decorative screws — they ate top space */
.app::before,
.app::after {
  display: none !important;
  content: none !important;
}

.brand {
  border-bottom: 2px solid #C49212 !important;
}
.brand h1 {
  color: #1A1A16 !important;
  text-shadow: 0 1px 0 #FFE97A !important;
}
.brand p,
.sign-out-link {
  color: #5A5340 !important;
}

.lcd {
  background: #0A120A !important;
  border: 3px solid #2A2A24 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 12px #000, 0 2px 0 #FFE97A !important;
}

.panel,
.field input,
.field textarea,
textarea,
input {
  background: #FFF8D0 !important;
  border-color: #C49212 !important;
  color: #1A1A16 !important;
}

.btn {
  background: #FFE566 !important;
  border: 2px solid #8A6A0C !important;
  color: #1A1A16 !important;
}
.btn.active,
.btn.primary {
  background: #1A1A16 !important;
  color: #F0C41A !important;
  border-color: #1A1A16 !important;
}

.tabs {
  border-color: #C49212 !important;
}

.ptt-btn,
button.ptt,
.ptt {
  background: linear-gradient(180deg, #E53935, #B71C1C) !important;
  border: 3px solid #5A1010 !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 #FF8A80, 0 4px 0 #5A1010 !important;
}

.voice-note {
  background: #FFF3A8 !important;
  border: 1px solid #C49212 !important;
}
.voice-play {
  background: #1A1A16 !important;
  color: #F0C41A !important;
}
.error {
  color: #B71C1C !important;
}