:root {
  color-scheme: light;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;

  --accent: #2563eb;
  --accent-dark: #1d4ed8;

  --danger: #dc2626;

  --incoming: #f1f3f5;
  --outgoing: #2563eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: 100dvh;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}

.screen {
  min-height: 100dvh;
}


/* LOGIN */

.login-screen {
  display: grid;
  place-items: center;

  padding:
    24px;

  padding-top:
    calc(24px + env(safe-area-inset-top));

  padding-bottom:
    calc(24px + env(safe-area-inset-bottom));
}

.login-card {
  width: min(
    100%,
    420px
  );

  background:
    var(--card);

  border:
    1px solid var(--line);

  border-radius:
    24px;

  padding:
    30px;

  box-shadow:
    0 18px 50px
    rgba(17, 24, 39, .08);
}

.logo {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background:
    #111827;

  color: white;

  font-size: 24px;
  font-weight: 800;

  margin-bottom: 18px;
}

h1 {
  margin:
    0 0 6px;

  font-size:
    28px;
}

.muted {
  color:
    var(--muted);
}

.hint {
  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.5;

  margin:
    18px 0 0;
}

label {
  display:
    block;

  margin-top:
    16px;
}

label span {
  display:
    block;

  margin-bottom:
    7px;

  font-size:
    13px;

  font-weight:
    600;
}

input,
textarea {
  width:
    100%;

  border:
    1px solid #d1d5db;

  border-radius:
    12px;

  background:
    white;

  color:
    var(--text);

  outline:
    none;
}

input {
  height:
    46px;

  padding:
    0 13px;
}

textarea {
  resize:
    none;

  min-height:
    42px;

  max-height:
    120px;

  padding:
    10px 12px;

  line-height:
    1.35;
}

input:focus,
textarea:focus {
  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, .12);
}

.primary {
  border:
    0;

  background:
    var(--accent);

  color:
    white;

  border-radius:
    12px;

  height:
    46px;

  font-weight:
    700;
}

.primary:hover {
  background:
    var(--accent-dark);
}

.full {
  width:
    100%;

  margin-top:
    20px;
}

.error {
  min-height:
    20px;

  color:
    var(--danger);

  font-size:
    13px;
}


/* CHAT */

.chat-screen {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  max-width:
    760px;

  margin:
    0 auto;

  background:
    white;

  height:
    100dvh;

  max-height:
    100dvh;
}

.chat-header {
  position:
    sticky;

  top:
    0;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    62px;

  padding:
    8px 12px;

  padding-top:
    calc(8px + env(safe-area-inset-top));

  border-bottom:
    1px solid var(--line);

  background:
    rgba(255,255,255,.94);

  backdrop-filter:
    blur(14px);
}

.identity {
  display:
    flex;

  gap:
    10px;

  align-items:
    center;

  min-width:
    0;
}

.avatar {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #111827;

  color:
    white;

  font-weight:
    800;
}

.identity strong {
  display:
    block;

  font-size:
    14px;
}

.online {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    11px;
}

.online span:first-child {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #22c55e;
}


/* HEADER BUTTONS */

.header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}

.header-button {
  min-width:
    44px;

  min-height:
    44px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    12px;

  background:
    transparent;

  color:
    var(--muted);

  padding:
    8px;
}

.header-button:active {
  background:
    #f3f4f6;
}

.header-button:disabled {
  opacity:
    .5;
}

.header-button.logout {
  padding:
    8px 10px;

  font-size:
    13px;
}


/* MESSAGES */

.messages {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    12px 12px 18px;

  background:
    linear-gradient(
      #fafafa,
      #ffffff
    );
}

.empty-state {
  max-width:
    320px;

  margin:
    12vh auto 0;

  text-align:
    center;

  color:
    var(--muted);
}

.empty-icon {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  margin:
    auto;

  border-radius:
    16px;

  background:
    #eef2ff;

  color:
    var(--accent);

  font-size:
    23px;
}

.empty-state h2 {
  color:
    var(--text);

  font-size:
    17px;

  margin:
    13px 0 5px;
}

.empty-state p {
  margin:
    0;

  line-height:
    1.5;

  font-size:
    13px;
}

.message-wrap {
  display:
    flex;

  margin:
    6px 0;
}

.message-wrap.outgoing {
  justify-content:
    flex-end;
}

.message-wrap.incoming {
  justify-content:
    flex-start;
}

.message {
  max-width:
    min(82%, 560px);

  padding:
    9px 12px;

  border-radius:
    16px;

  box-shadow:
    0 1px 2px
    rgba(0,0,0,.05);

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  font-size:
    15px;

  line-height:
    1.35;
}

.incoming .message {
  background:
    var(--incoming);

  border-bottom-left-radius:
    5px;
}

.outgoing .message {
  background:
    var(--outgoing);

  color:
    white;

  border-bottom-right-radius:
    5px;
}

.message-meta {
  margin-top:
    4px;

  font-size:
    9px;

  opacity:
    .62;

  text-align:
    right;
}

.message-sender {
  font-size:
    10px;

  font-weight:
    700;

  margin-bottom:
    2px;

  opacity:
    .72;
}


/* STATUS */

.status-bar {
  min-height:
    20px;

  padding:
    0 12px 3px;

  font-size:
    11px;

  color:
    var(--muted);
}

.status-bar.error {
  color:
    var(--danger);
}


/* COMPOSER */

.composer {
  position:
    sticky;

  bottom:
    0;

  z-index:
    5;

  padding:
    6px 10px
    calc(
      6px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid var(--line);

  background:
    rgba(255,255,255,.97);

  backdrop-filter:
    blur(14px);
}

.recipient-row {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    5px;
}

.recipient-row label {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;

  white-space:
    nowrap;
}

.recipient-row input {
  height:
    34px;

  font-size:
    13px;
}

.message-row {
  display:
    flex;

  align-items:
    flex-end;

  gap:
    7px;
}

.message-row textarea {
  flex:
    1;
}

.send-button {
  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  border:
    0;

  border-radius:
    50%;

  background:
    var(--accent);

  color:
    white;

  font-size:
    19px;
}

.send-button:disabled {
  opacity:
    .45;

  cursor:
    default;
}


/* DESKTOP */

@media (min-width: 760px) {

  body {
    padding:
      20px;
  }

  .chat-screen {
    height:
      calc(100dvh - 40px);

    max-height:
      calc(100dvh - 40px);

    border:
      1px solid var(--line);

    border-radius:
      20px;

    overflow:
      hidden;

    box-shadow:
      0 18px 50px
      rgba(17,24,39,.08);
  }

}