:root {
  /* Main surfaces */
  --background: #d6d6d6;       /* Overall app background */
  --background-ui: #333333;    /* Navigation, dark UI elements */
  --surface: #ffffff;          /* Cards, chat window, panels */

  /* Text */
  --text: #ffffff;             /* Main text */
  --text-secondary: #666666;   /* Less important text */
  --text-inverse: #333333;     /* Text on Light */

  /* UI elements */
  --button: #333333;           /* Standard button colour */
  --button-hover: #555555;     /* Hover/pressed state */
  --border: #dddddd;           /* Lines/dividers */

  /* Status colours */
  --success: #4caf50;          /* Logged/success actions */
  --warning: #ff9800;          /* Warnings */
  --error: #f44336;            /* Errors */
}

* {box-sizing:border-box;}

html,
body {
  margin:0;
  padding:0;
  height:var(--app-height);
  font-family:Arial, sans-serif;
  background:var(--background);
 
}

.app {
  height:var(--app-height);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:0;
}

#view-container {
  flex:1;
  min-height: 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#view-container > * {
  min-height:0;
}

.bottom-nav {
  height:120px;
  display:flex;
  flex:none;
  background:white;
  border-top:1px solid #ddd;
}

.bottom-nav button {
  flex:1;
  border:none;
  border-radius:0;
  background:var(--background-ui);
  color: var(--text);
  font-size:clamp(24px, 5vw, 32px);
  font-weight:bold;
  border-right:1px solid #ddd;
}

.bottom-nav button:last-child {
  border-right:none;
}

.bottom-nav button:hover {
  background:var(--background);
  color: var(--text-inverse);
}

/* Header */
.header {
  min-height:55px;
  padding:10px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--background-ui);
  color: var(--text);
  border-bottom:1px solid #ddd;
}

.title {
  font-size:min(10vw, 10vh);
  color: var(--text);
  font-weight:bold;
  text-align:center;
}

.loading-view {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.loading-view h2{
  font-size:36px;
}

.loading-view p{
  font-size:32px;
}