/* A phone with a TradieRing thread in it: navy bezel, chat header with the ring mark as the avatar, a composer.
   Used by the Daylight variations 2 and 4 (and the avatar by 5). */
.phone-frame {
  --bezel: 10px;
  position: relative; width: 100%; max-width: 400px; margin: 0 auto;
  padding: var(--bezel); border-radius: 50px; background: var(--navy-900);
  box-shadow: 0 30px 60px -30px rgba(32, 39, 52, .35);
}
.screen { position: relative; border-radius: 40px; background: var(--white); overflow: clip; }

/* Chat header: back chevron, avatar, name, app */
.chat-head {
  display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; justify-items: center;
  padding: 14px 16px 10px; background: var(--white); border-bottom: 1px solid var(--navy-100);
}
.chat-head .back { width: 12px; height: 20px; color: var(--navy-700); justify-self: start; }
.who { display: grid; justify-items: center; gap: 3px; }
.who b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.who small { font-family: var(--mono); font-size: 11px; color: var(--navy-500); letter-spacing: -0.02em; line-height: 1; }

/* The avatar: the ring mark, lime on navy */
.av-tr { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--navy-900); display: grid; place-items: center; }
.av-tr .ring { width: 17px; height: 17px; border-width: 4px; border-color: var(--lime-100); }
.av-tr .ring::after { width: 4px; height: 4px; background: var(--lime-100); }
.av-tr.sm { width: 28px; height: 28px; }
.av-tr.sm .ring { width: 13px; height: 13px; border-width: 3px; }
.av-tr.sm .ring::after { width: 3px; height: 3px; }

/* Composer */
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 16px; background: var(--white); }
.composer .field {
  flex: 1; min-height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(32, 39, 52, .14); font-size: 15px; color: var(--navy-300); letter-spacing: -0.01em;
}
.composer .sendb { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-100); display: grid; place-items: center; color: var(--navy-500); }
.composer .sendb svg { width: 14px; height: 14px; }

/* Inside the phone the thread sits on white, so TradieRing's bubbles take the faint tint. */
.screen .thread { --in-bg: var(--navy-100); --in-ring: none; padding: 12px 12px 6px; }
.screen .c-day { margin: 14px 0 8px; }