/* Minimal base styles (add Tailwind later if you want) */
:root { color-scheme: light; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f7f7fb; color: #111827; }
a { color: inherit; }
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
.card { background: white; border-radius: 14px; padding: 16px; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.btn { display: inline-block; padding: 12px 14px; border-radius: 12px; border: 0; background: #111827; color: white; text-decoration: none; cursor: pointer; }
.btn.secondary { background: #e5e7eb; color: #111827; }
.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.small { font-size: 12px; color: #6b7280; }
.badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-size: 12px; background:#e5e7eb; }
.badge.green { background:#dcfce7; color:#166534; }
.badge.red { background:#fee2e2; color:#991b1b; }
.input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #d1d5db; box-sizing: border-box; }
/* -------------------------------------------------------
   WorkChat Messenger MVP layout (mobile-first)
------------------------------------------------------- */
.wc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.wc-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.wc-brand { display:flex; gap:10px; align-items:center; }
.wc-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; }
.wc-title { font-weight: 800; letter-spacing: -.02em; }
.wc-subtitle { font-size: 12px; color: #6b7280; margin-top: 1px; }
.wc-user { display:flex; gap:12px; align-items:center; }
.wc-user-name { font-weight: 650; font-size: 13px; color:#111827; }
.wc-link { font-size: 13px; color:#111827; text-decoration:none; opacity:.8; }
.wc-link:hover { opacity: 1; text-decoration: underline; }

.wc-main { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
.wc-sidebar {
  display:none;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
  min-height: 0;
}
.wc-side-head { padding: 14px; border-bottom: 1px solid #e5e7eb; }
.wc-side-title { font-weight: 800; }
.wc-side-hint { font-size: 12px; color:#6b7280; margin-top: 2px; }

.wc-channels { padding: 10px; display:flex; flex-direction:column; gap:8px; overflow:auto; min-height:0; }
.wc-channel {
  width:100%;
  text-align:left;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
}
.wc-channel.active { background:#111827; border-color:#111827; color:#ffffff; }
.wc-channel-name { font-weight: 750; }
.wc-channel-meta { font-size: 12px; opacity: .7; margin-top: 2px; }

.wc-chat { display:flex; flex-direction:column; min-height:0; }
.wc-chat-head {
  padding: 14px;
  background:#ffffff;
  border-bottom: 1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.wc-chat-name { font-weight: 850; letter-spacing:-.02em; }
.wc-chat-hint { font-size:12px; color:#6b7280; margin-top:2px; }

.wc-messages {
  flex: 1;
  overflow:auto;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wc-msg {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px 12px 10px;
}
.wc-msg.urgent { border-color:#fecaca; background:#fff7f7; }
.wc-msg.low { opacity:.85; }
.wc-msg-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.wc-msg-name { font-weight: 800; font-size: 13px; }
.wc-msg-time { font-size: 12px; color:#6b7280; }
.wc-msg-body { margin-top: 6px; white-space: pre-wrap; line-height: 1.35; }

.wc-composer {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background:#ffffff;
  display:flex;
  gap:10px;
  align-items:center;
}
.wc-input {
  flex: 1;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid #d1d5db;
  outline:none;
  font-size: 15px;
}
.wc-input:focus { border-color:#111827; box-shadow: 0 0 0 3px rgba(17,24,39,.10); }
.wc-select {
  border:1px solid #d1d5db;
  border-radius: 14px;
  padding: 11px 10px;
  background:#fff;
}
.wc-btn {
  border:0;
  border-radius: 14px;
  padding: 12px 14px;
  background:#111827;
  color:#fff;
  cursor:pointer;
  font-weight: 750;
}
.wc-btn.secondary { background:#e5e7eb; color:#111827; }

/* Desktop: show sidebar and 2-col layout */
@media (min-width: 900px) {
  .wc-main { grid-template-columns: 320px 1fr; }
  .wc-sidebar { display:block; }
}