/* Telefono: Android economico con MessApp e lo schermo crepato in un angolo, come assets/ui/themes/phone_theme.tres.
   Le misure sono quelle del gioco (schermo di 212x380) moltiplicate per --u, cosi' sul sito il testo arriva a una
   misura che si legge bene anche sul telefono vero. */

.surface-phone {
  --u: 1.25px;
  font-family: "Pezzotto Phone", sans-serif;
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  color: #1b1b1e;
}

/* La scocca (PhoneFrame): 9-slice di phone_frame.png. I bordi dell'immagine (22 px ai lati) sono piu' larghi
   del bordo vero (12 px): la parte in piu' e' gia' schermo, e lo schermo ci passa sopra. */
.surface-phone .phone-frame {
  display: flex;
  flex-direction: column;
  width: calc(236 * var(--u));
  max-width: 100%;
  min-height: calc(466 * var(--u));
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: calc(40 * var(--u)) calc(12 * var(--u)) calc(46 * var(--u));
  border-image: url("/img/ui/phone_frame.png") 40 22 46 fill / calc(40 * var(--u)) calc(22 * var(--u)) calc(46 * var(--u)) stretch;
}

/* Lo schermo (PhoneScreen) con la crepa in alto a destra, sopra a tutto ma senza fermare clic e selezione */
.surface-phone .phone-screen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #edeae4;
  overflow: hidden;
}
.surface-phone .phone-screen::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  background: url("/img/ui/phone_crack.png") no-repeat top right / contain;
  pointer-events: none;
}

/* Barra di stato nera con ora, campo e batteria (PhoneStatusBar) */
.surface-phone .phone-status {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  background: #000;
  color: #fff;
  font-size: calc(12 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
}
.surface-phone .phone-status-icons {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.surface-phone .phone-status-icons img {
  height: calc(10 * var(--u));
  width: auto;
}

/* Intestazione verde di MessApp (AppHeader) con avatar, nome e sottotitolo */
.surface-phone .phone-header {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  background: #1f6b4a;
  padding: calc(5 * var(--u)) calc(6 * var(--u));
}
.surface-phone .phone-header-text {
  min-width: 0;
}
.surface-phone .phone-header-title {
  margin: 0;
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.surface-phone .phone-header-subtitle {
  margin: 0;
  color: #cfe6da;
  font-size: calc(11 * var(--u));
}
.surface-phone .phone-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: #cfe6da;
  color: #1f6b4a;
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

/* La chat (ChatArea) con le bolle: bianche quelle che arrivano, verdi quelle mandate */
.surface-phone .phone-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  background: #e4dccf;
  padding: calc(6 * var(--u));
  margin: 0;
  list-style: none;
}
.surface-phone .phone-bubble {
  max-width: 85%;
  padding: calc(4 * var(--u)) calc(7 * var(--u)) calc(3 * var(--u));
  border-radius: calc(7 * var(--u));
  overflow-wrap: anywhere;
}
.surface-phone .phone-bubble.is-in {
  align-self: flex-start;
  background: #fff;
  border-bottom: 1px solid #c9c2b6;
  border-top-left-radius: 0;
}
.surface-phone .phone-bubble.is-out {
  align-self: flex-end;
  background: #d6f2c2;
  border-bottom: 1px solid #b7d3a3;
  border-top-right-radius: 0;
}
.surface-phone .phone-sender {
  display: block;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
/* L'ora sotto il messaggio. Nel gioco e' #7A7A7A: sul sito un po' piu' scura per il contrasto (4,5:1 anche
   sulla bolla verde) */
.surface-phone .phone-time {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(2 * var(--u));
  color: #5c5c5c;
  font-size: calc(10 * var(--u));
}
.surface-phone .phone-ticks {
  width: calc(17 * var(--u));
  height: calc(10 * var(--u));
}

/* Data in mezzo alla chat (DateChip) e avviso di sistema giallino (SystemNotice) */
.surface-phone .phone-date-chip {
  align-self: center;
  background: #d9e7ef;
  color: #4a5a66;
  font-size: calc(11 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
}
.surface-phone .phone-notice {
  align-self: center;
  background: #fbf0c2;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  text-align: center;
}

/* Pallino rosso coi messaggi da leggere (Badge) */
.surface-phone .phone-badge {
  display: inline-block;
  background: #e3262b;
  color: #fff;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  padding: 0 calc(4 * var(--u)) var(--u);
  border-radius: calc(8 * var(--u));
}

/* Barra per scrivere (InputBar) col campo tondo e il pulsante verde di invio */
.surface-phone .phone-input-bar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  background: #e4dccf;
  padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
}
.surface-phone .phone-input {
  flex: 1;
  min-width: 0;
  background: #fff;
  color: #5c5c5c;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(15 * var(--u));
}
.surface-phone .phone-send {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border: 0;
  border-radius: 50%;
  background: #1f6b4a url("/img/ui/phone_send.png") no-repeat center / calc(14 * var(--u));
  cursor: pointer;
}

/* Pulsante blu (OrderButton): premuto si abbassa */
.surface-phone .phone-button {
  font: inherit;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: #fff;
  background: #1c3f94;
  border: 0;
  border-bottom: calc(2 * var(--u)) solid #0f2356;
  border-radius: calc(3 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
  cursor: pointer;
}
.surface-phone .phone-button:hover {
  background: #2952b2;
}
.surface-phone .phone-button:active {
  background: #0f2356;
  border-bottom: 0;
  border-top: calc(2 * var(--u)) solid #081434;
}

.surface-phone a {
  color: #1c3f94;
}
.surface-phone :focus-visible {
  outline: 2px solid #1f6b4a;
  outline-offset: 2px;
}