:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #667085;
  --line: #d7dde5;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --danger: #b42318;
  --mine: #dcfce7;
  --theirs: #eef2f7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--accent-strong);
}

button.secondary-button {
  background: #eef2f7;
  color: var(--ink);
}

button.secondary-button:hover:not(:disabled) {
  background: #dbe3ee;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-shell {
  min-height: 100vh;
}

.entry {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.entry-panel {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);
}

.entry-panel h1,
.room-header h2,
.voice-panel h3 {
  margin: 4px 0 0;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.entry-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.entry-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.entry-actions,
.header-actions,
.voice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chat {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.mobile-presence {
  display: none;
}

.invite-fallback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: #ecfdf5;
  color: var(--accent-strong);
  font-size: 14px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
  background: #fff;
  white-space: nowrap;
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  padding: 16px;
  min-height: 0;
}

.timeline-panel,
.voice-panel {
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.timeline-panel {
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.message {
  max-width: min(72ch, 85%);
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--theirs);
}

.message.mine {
  margin-left: auto;
  background: var(--mine);
}

.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.message-delete {
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
}

.message-delete:hover:not(:disabled) {
  background: rgba(180, 35, 24, 0.1);
  color: var(--danger);
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.composer-input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
  outline: none;
  cursor: text;
}

.composer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.composer-input:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

.composer-input img {
  vertical-align: middle;
  max-height: 60px;
  border-radius: 4px;
  margin: 0 2px;
}

.file-message {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  color: var(--accent-strong);
  text-decoration: none;
}

.file-size {
  color: var(--muted);
  font-size: 12px;
}

.voice-panel {
  padding: 16px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.icon-button {
  background: #eef2f7;
  color: var(--ink);
  padding: 8px 10px;
}

.member-section {
  margin-bottom: 14px;
}

.section-title {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.participants {
  display: grid;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 16px;
}

.participant {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
}

.participant.me {
  border-color: rgba(15, 118, 110, 0.45);
  background: #ecfdf5;
}

.participant-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.participant-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.participant-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #22c55e;
}

.error-text {
  min-height: 20px;
  margin: 8px 12px;
  color: var(--danger);
  font-size: 14px;
}

.mic-diagnostics {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.mic-diagnostics label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.mic-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.mic-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 120ms linear;
}

.mic-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

audio {
  width: min(320px, 100%);
}

.message-image-wrapper {
  margin: 0;
}

.message-image {
  display: block;
  max-width: 320px;
  max-height: 320px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.message-image:hover {
  opacity: 0.85;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: grid;
  place-items: center;
  z-index: 9999;
  cursor: pointer;
  animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.image-preview {
  display: none;
  gap: 8px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.image-preview.has-previews {
  display: flex;
  flex-wrap: wrap;
}

.image-preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #f9fafb;
  transition: border-color 0.2s, opacity 0.2s;
}

.image-preview-item.uploading {
  opacity: 0.55;
  border-color: var(--accent);
}

.image-preview-item.uploaded {
  border-color: #22c55e;
}

.image-preview-item.upload-failed {
  border-color: var(--danger);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  border: 0;
  cursor: pointer;
}

.image-preview-remove:hover:not(:disabled) {
  background: rgba(180, 35, 24, 0.85);
}


.message-avatar, .call-toggle { display:none; }
@media (max-width:760px) {
  .chat { height:100dvh; min-height:0; overflow:hidden; background:#f7f8fa; }
  .room-header { flex-shrink:0; padding:10px 14px; gap:8px; min-height:58px; }
  .room-header .eyebrow, #onlineCount { display:none; }
  .room-header h2 { font-size:22px; margin:0; }
  .header-actions { gap:6px; flex-wrap:nowrap; align-items:center; }
  .header-actions button { padding:8px; min-height:38px; font-size:12px; background:white; border:1px solid #e1e5e9; color:var(--accent); border-radius:9px; }
  #leaveRoomButton { color:#e84b45; }
  #connectionState { position:absolute; top:48px; right:14px; border:0; padding:0; min-height:0; font-size:9px; background:transparent; }
  .mobile-presence { display:flex; align-items:center; gap:8px; padding:10px 14px; background:white; border-bottom:1px solid #e7eaee; flex-shrink:0; }
  .mobile-presence-count { white-space:nowrap; font-size:12px; }
  .mobile-presence-members { display:flex; gap:6px; overflow-x:auto; min-width:0; }
  .presence-chip { display:flex; align-items:center; gap:5px; flex-shrink:0; padding:3px 7px 3px 3px; border:1px solid #e5e8ec; border-radius:24px; font-size:12px; }
  .presence-chip .participant-name { max-width:100px; }
  .participant-avatar { background:#0ca7a2; width:26px; height:26px; flex-basis:26px; }
  .workspace { display:flex; flex-direction:column; flex:1; min-height:0; padding:0; gap:0; }
  .timeline-panel { display:contents; }
  .messages { order:1; flex:1; min-height:80px; overflow-y:auto; padding:18px 14px; }
  .message { position:relative; width:fit-content; max-width:calc(100% - 72px); margin:0 0 20px 40px; padding:10px 12px; border-radius:15px; background:#eef0f2; overflow-wrap:anywhere; line-height:1.5; }
  .message.mine { margin-left:auto; margin-right:40px; background:#e2f4ee; }
  .message-avatar { display:grid; place-items:center; position:absolute; left:-40px; top:0; width:30px; height:30px; border-radius:50%; color:white; background:#0ca7a2; font-weight:600; }
  .mine .message-avatar { left:auto; right:-40px; }
  .message-meta { font-size:11px; gap:10px; }
  .message-delete { font-size:10px; padding:2px; }
  .message audio, .message-image { max-width:100%; }
  .message.empty-state { margin:20px auto; background:transparent; color:var(--muted); font-size:13px; }
  .file-message { padding:10px 2px; }
  .voice-panel { order:2; flex-shrink:0; margin:0 10px 8px; padding:12px; border:1px solid #edf0f2; border-radius:16px; box-shadow:0 2px 9px #162d4010; }
  .panel-heading { margin:0 0 8px; align-items:center; gap:6px; }
  .panel-heading .eyebrow { display:none; }
  .panel-heading h3 { font-size:15px; margin:0; }
  #callState { margin-left:auto; font-size:11px; min-height:24px; padding:0 7px; }
  .call-toggle { display:block; color:#26343e; background:transparent; padding:5px 8px; font-size:18px; }
  #voicePanelBody { display:grid; grid-template-columns:minmax(105px, .95fr) minmax(0,1.6fr); gap:8px 10px; }
  #voicePanelBody > .member-section:first-child { display:none; }
  #voicePanelBody > .member-section { grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:0; }
  .section-title { margin:0; font-size:12px; white-space:nowrap; }
  #callParticipants { display:flex; gap:5px; overflow-x:auto; margin:0; min-height:26px; font-size:11px; align-items:center; }
  #callParticipants .participant { flex-shrink:0; padding:3px 6px; border-radius:20px; align-items:center; font-size:11px; }
  #callParticipants .participant-state { font-size:9px; color:#667085; }
  #callParticipants .participant-main { gap:4px; }
  .mic-diagnostics { grid-template-areas:"status" "meter" "select"; gap:6px; margin:0; align-content:center; }
  .mic-diagnostics label { grid-area:select; font-size:0; gap:0; }
  #audioDeviceSelect { min-width:0; padding:7px 4px; font-size:11px; border-radius:7px; }
  .mic-meter { grid-area:meter; height:10px; border-radius:3px; }
  #micStatus { grid-area:status; font-size:10px; min-height:0; }
  .voice-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; align-items:stretch; }
  .voice-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:9px 0; font-size:11px; border:1px solid #e5e8ec; border-radius:10px; background:white; color:#26343e; min-height:66px; }
  .voice-actions button::before { font-size:22px; line-height:1; }
  #joinCallButton { background:#079d98; color:white; border-color:#079d98; }
  #joinCallButton::before { content:"☎"; }
  #muteButton::before { content:"♩"; }
  #leaveCallButton::before { content:"☎"; color:#ec4943; transform:rotate(135deg); }
  #reconnectCallButton::before { content:"⟳"; }
  #peerStatus, #voiceError { grid-column:1/-1; font-size:10px; margin:0; min-height:0; }
  .voice-panel.collapsed #voicePanelBody { display:none; }
  .voice-panel.collapsed .panel-heading { margin:0; }
  .composer { order:3; flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); background:white; border-top:1px solid #e9ecf0; }
  .composer-input { order:2; flex:1; min-width:0; min-height:42px; max-height:90px; padding:10px 12px; border-radius:24px; font-size:16px; }
  #fileButton { order:1; }
  #recordButton { order:3; }
  .composer > button[type=submit] { order:4; background:#079d98; color:white; border-radius:50%; }
  .composer > button { min-width:38px; min-height:42px; padding:6px; color:#26343e; background:white; font-size:12px; }
  .image-preview { order:0; width:100%; padding:0; border:0; max-height:85px; overflow:auto; }
  #composerError { order:4; flex-shrink:0; background:white; margin:0; padding:0 12px; font-size:12px; min-height:0; }
  .error-text:empty { display:none; }
  .invite-fallback { flex-shrink:0; padding:6px 12px; font-size:11px; }
}

@media(max-width:760px) {
  .composer > button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
  #fileButton::before { content:"＋"; font-size:23px; line-height:1; }
  #recordButton::before { content:"◎"; font-size:23px; line-height:1; }
  .composer > button[type=submit]::before { content:"➤"; font-size:19px; line-height:1; }
}