* { box-sizing: border-box; }
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033; background: #eef2ff;
}
body { margin: 0; min-height: 100vh; padding: 24px 14px; display: grid; place-items: center; }
.shell { width: 100%; max-width: 760px; }
.login-card, .chat-card {
  background: #fff; border: 1px solid #e3e8f4; border-radius: 22px;
  box-shadow: 0 18px 55px rgba(28, 42, 82, .10);
}
.login-card { max-width: 420px; margin: 8vh auto; padding: 34px; }
.brand-mark { width: 46px; height: 46px; display:grid; place-items:center; border-radius:15px; background:#172554; color:#fff; font-size:24px; }
h1 { margin: 14px 0 5px; font-size: 27px; letter-spacing: -.6px; }
.muted { color:#78839a; margin: 0 0 24px; font-size:14px; }
label { display:block; font-size:13px; font-weight:650; margin:17px 0 7px; }
input, textarea { width:100%; border:1px solid #d8deeb; border-radius:12px; padding:13px 14px; font:inherit; outline:none; background:#fbfcff; }
input:focus, textarea:focus { border-color:#5268c9; box-shadow:0 0 0 3px rgba(82,104,201,.12); }
button { border:0; border-radius:12px; background:#253b8f; color:white; padding:13px 18px; font:inherit; font-weight:650; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
#loginButton { width:100%; margin-top:22px; }
.error { min-height:18px; color:#bd3030; font-size:13px; }
.hidden { display:none !important; }
.chat-card { overflow:hidden; }
.chat-header { padding:24px 26px 18px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; border-bottom:1px solid #edf0f6; }
.chat-header h1 { margin:5px 0; }
.chat-header .muted { margin:0; }
.eyebrow { color:#6979b8; font-size:10px; font-weight:800; letter-spacing:1.5px; }
.secondary { background:#edf0f8; color:#27345e; }
.small { padding:9px 13px; font-size:13px; }
.status { padding:10px 26px; color:#73809a; font-size:12px; border-bottom:1px solid #f0f2f7; }
.messages { height:min(58vh, 560px); min-height:300px; overflow-y:auto; padding:22px; background:#f8f9fd; display:flex; flex-direction:column; gap:12px; }
.message { max-width:78%; padding:11px 14px; border-radius:16px; background:#fff; border:1px solid #e7eaf2; align-self:flex-start; overflow-wrap:anywhere; }
.message.mine { align-self:flex-end; background:#e9edff; border-color:#dce3ff; }
.message .meta { color:#818ba1; font-size:10px; margin-bottom:5px; }
.message .body { white-space:pre-wrap; font-size:14px; line-height:1.45; }
.empty { text-align:center; color:#8a94a9; margin:auto; font-size:14px; }
.composer { display:flex; align-items:flex-end; gap:10px; padding:16px 20px 8px; }
.composer textarea { resize:vertical; min-height:48px; max-height:140px; }
.footnote { padding:0 22px 18px; margin:6px 0 0; color:#8a94a9; font-size:11px; line-height:1.45; }
@media (max-width:560px) {
  body { padding:10px; }
  .login-card { padding:26px 22px; }
  .chat-header { padding:20px 16px 15px; }
  .messages { padding:16px 12px; }
  .composer { padding:12px; }
  .message { max-width:88%; }
}
<div class="composer">
  <input
    type="file"
    id="photoInput"
    accept="image/jpeg,image/png,image/webp,image/gif"
    hidden
  >

  <button type="button" id="photoButton" class="secondary">
    📷 Photo
  </button>

  <textarea
    id="messageInput"
    rows="2"
    maxlength="4000"
    placeholder="Write a message…"
    aria-label="Message"
  ></textarea>

  <button type="button" id="sendButton">Send</button>
</div>

<div id="photoPreview" class="photo-preview hidden">
  <img id="previewImage" alt="Selected photo preview">
  <button type="button" id="removePhotoButton" class="secondary">
    Remove photo
  </button>
</div>
/* Improved photo preview */
.photo-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  background: #f8f9fd;
  border-top: 1px solid #edf0f6;
}

.photo-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  border: 1px solid #dce2ef;
  background: white;
}

.message-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 320px);
  max-height: 350px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
}
/* Full-screen image viewer */
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 12px 20px;
  box-sizing: border-box;
}

.image-modal img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.image-modal .close-button {
  position: absolute;
  top: 12px;
  right: 16px;
  color: white;
  background: transparent;
  border: none;
  font-size: 30px;
  cursor: pointer;
}