/* Pensado para 800x480.
   Compatible con Chrome 61 Y con el WebView WebKit de Android 4.2, que sólo
   implementa a medias el flexbox antiguo. Por eso NO se usa flexbox:
   sólo float, display:table y posiciones absolutas. */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0d0f12; color: #e8e8e8;
  font-family: Roboto, "Droid Sans", sans-serif; font-size: 20px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
}

/* ---- Cabecera (alto fijo 52px) ---- */
header {
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  padding: 0 14px; background: #161a20; border-bottom: 1px solid #262c35;
}
#clock { float: left; line-height: 52px; font-size: 30px; font-weight: bold; letter-spacing: 1px; }
#status { float: right; line-height: 52px; font-size: 16px; color: #aaa; white-space: nowrap; }
#dot {
  width: 14px; height: 14px; border-radius: 7px; background: #c0392b;
  margin-right: 8px; display: inline-block; vertical-align: middle;
}
#dot.ok { background: #27ae60; }
#statusText { vertical-align: middle; }

/* ---- Pestañas (alto fijo 56px) ---- */
nav {
  position: absolute; top: 52px; left: 0; right: 0; height: 56px;
  background: #12151a; overflow: hidden;
}
nav button {
  float: left; width: 25%; height: 56px; margin: 0; padding: 0;
  font-size: 19px; color: #bbb; background: transparent;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0; outline: none;
  white-space: nowrap; overflow: hidden; -webkit-appearance: none;
}
nav button.on { color: #fff; border-bottom-color: #3b82f6; }

/* ---- Contenido (ocupa el resto) ---- */
main {
  position: absolute; top: 108px; left: 0; right: 0; bottom: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 14px;
}
.tab { display: none; }
.tab.on { display: block; }

a.app {
  display: block; position: relative;
  background: #1e4d8c; color: #fff; text-decoration: none;
  padding: 16px 110px 16px 16px; margin: 8px 0; border-radius: 8px; font-size: 22px;
  word-wrap: break-word;
}
a.app:active { background: #2e6dbc; }
a.app small {
  position: absolute; right: 16px; top: 50%; margin-top: -10px;
  font-size: 15px; color: #cde;
}

.msg { background: #1b2028; border-left: 5px solid #3b82f6; padding: 12px; margin: 8px 0; border-radius: 4px; }
.msg time { display: block; font-size: 14px; color: #888; margin-bottom: 4px; }

.row { display: table; width: 100%; }
.row .cell { display: table-cell; vertical-align: middle; }
.row .cell.fill { width: 100%; }
.row input {
  width: 100%; height: 48px; font-size: 20px; padding: 0 10px; border: 0; border-radius: 6px 0 0 6px;
  -webkit-user-select: text; -webkit-appearance: none;
}
.row button {
  height: 48px; font-size: 20px; padding: 0 20px; border: 0; background: #3b82f6; color: #fff;
  border-radius: 0 6px 6px 0; white-space: nowrap; -webkit-appearance: none;
}

pre { white-space: pre-wrap; word-wrap: break-word; background: #161a20; padding: 10px; border-radius: 6px; font-size: 16px; -webkit-user-select: text; }
.muted { color: #888; }
.hint { font-size: 15px; color: #888; }

#toast {
  position: fixed; left: 20px; right: 20px; bottom: 20px;
  background: #3b82f6; color: #fff; padding: 18px; border-radius: 10px;
  font-size: 24px; text-align: center; display: none;
  -webkit-box-shadow: 0 4px 20px rgba(0,0,0,.6); box-shadow: 0 4px 20px rgba(0,0,0,.6);
}

button.big { font-size: 20px; padding: 14px 20px; border: 0; border-radius: 6px; background: #3b82f6; color: #fff; -webkit-appearance: none; }

/* ---- Intercom ---- */
.center { text-align: center; }
.lbl { font-size: 17px; color: #9ab; padding-right: 8px; white-space: nowrap; }
#tab-intercom.on { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#chat {
  position: absolute; top: 0; left: 0; right: 0; bottom: 124px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 14px;
}
#composer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 124px;
  padding: 6px 14px; background: #12151a; border-top: 1px solid #262c35;
}
#composer .row { margin: 4px 0; }
#composer select {
  width: 100%; height: 48px; font-size: 19px; padding: 0 8px;
  background: #1b2028; color: #eee; border: 1px solid #333; border-radius: 6px;
}
button.talk {
  height: 48px; min-width: 150px; margin-left: 8px; font-size: 21px; font-weight: bold;
  border: 0; border-radius: 6px; background: #16a34a; color: #fff; -webkit-appearance: none;
}
button.talk.rec { background: #dc2626; }
button.talk.busy { background: #555; }
button.cancel {
  height: 48px; width: 56px; margin-left: 6px; font-size: 20px; border: 0; border-radius: 6px;
  background: #444; color: #fff; -webkit-appearance: none;
}

.bubble {
  max-width: 78%; margin: 6px 0; padding: 10px 12px; border-radius: 10px;
  background: #1b2028; clear: both; word-wrap: break-word;
}
.bubble.me { float: right; background: #1e4d8c; }
.bubble.them { float: left; }
.bubble.sys { float: none; max-width: 100%; background: #2a2410; border-left: 4px solid #eab308; }
.bubble .meta { display: block; font-size: 13px; color: #9ab; margin-bottom: 3px; }
.bubble.me .meta { color: #cde; }
.bubble .play {
  height: 44px; padding: 0 16px; font-size: 18px; border: 0; border-radius: 22px;
  background: #3b82f6; color: #fff; -webkit-appearance: none;
}
.bubble .play.playing { background: #16a34a; }
.clear { clear: both; }