/* 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; }
}


/* Attachments */
.wc-attach-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
@media (max-width: 720px){
  .wc-attach-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.wc-attach{
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius:14px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.wc-attach-img img{
  width:100%;
  height:92px;
  object-fit:cover;
  display:block;
}
.wc-attach-tile{
  padding:10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.wc-attach-ico{
  font-size:20px;
  line-height:1;
}
.wc-attach-meta{ min-width:0; }
.wc-attach-name{
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wc-attach-size{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}

/* Upload progress bubble */
.wc-upload-card{
  margin-top:10px;
  padding:10px;
  border:1px dashed #d1d5db;
  border-radius:14px;
  background:#ffffff;
}
.wc-upload-row{ display:flex; justify-content:space-between; gap:10px; }
.wc-upload-label{ font-weight:800; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-upload-pct{ font-weight:800; font-size:12px; color:#111827; }
.wc-upload-bar{ height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; margin-top:8px; }
.wc-upload-fill{ height:10px; background:#2563eb; width:0%; border-radius:999px; }
.wc-upload-hint{ font-size:12px; color:#6b7280; margin-top:6px; }
.wc-upload-success{ margin-top:10px; font-weight:800; font-size:12px; color:#065f46; }

/* Lightbox */
.wc-lightbox{ position:fixed; inset:0; z-index:9999; display:none; }
.wc-lightbox.open{ display:block; }
.wc-lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.wc-lightbox-card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(920px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
}
.wc-lightbox-top{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.wc-lightbox-title{ font-weight:900; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-lightbox-actions{ display:flex; gap:8px; align-items:center; }
.wc-lightbox-body{
  padding:12px;
  overflow:auto;
  flex:1;
  background:#f9fafb;
}
.wc-lightbox-meta{
  padding:10px 12px;
  border-top:1px solid #e5e7eb;
  font-size:12px;
  color:#374151;
  background:#ffffff;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.wc-lb-img{ width:100%; height:auto; border-radius:14px; display:block; }
.wc-lb-video, .wc-lb-audio{ width:100%; }
.wc-lb-frame{ width:100%; height:60vh; border:0; border-radius:14px; background:#fff; }
.wc-lb-pre{
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
}
.wc-lb-loading, .wc-lb-err{ font-size:12px; color:#6b7280; }
.wc-lb-details{ display:flex; gap:10px; align-items:center; font-size:13px; }
.wc-lb-ico{ font-size:20px; }

.wc-csv{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  font-size:12px;
}
.wc-csv td{
  border-bottom:1px solid #f3f4f6;
  border-right:1px solid #f3f4f6;
  padding:8px;
  vertical-align:top;
}
.wc-csv tr:last-child td{ border-bottom:0; }
.wc-csv td:last-child{ border-right:0; }


/* -------------------------------------------------------
   App-only sticky frame (Option A)
------------------------------------------------------- */
.wc-body-app, html { height: 100%; }
.wc-body-app { overflow: hidden; }
.wc-body-app .wc-shell { height: 100dvh; overflow: hidden; }

.wc-top-icons { display:flex; gap:12px; align-items:center; }

/* Top-right icon row: match the "flat" look (no boxed buttons) */
.wc-icon-btn {
  width: 30px; height: 30px;
  border: 0;
  background: transparent;
  color: #111827;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border-radius: 10px;
}
.wc-icon-btn svg{ width:20px; height:20px; display:block; }
.wc-icon-btn:hover { background: rgba(17,24,39,.06); }

.wc-profile-btn{
  display:flex; gap:8px; align-items:center;
  border:0; background:transparent;
  border-radius: 12px; padding: 4px 6px;
  cursor:pointer;
}
.wc-profile-btn:hover{ background: rgba(17,24,39,.06); }
.wc-avatar{
  width: 28px; height: 28px; border-radius: 999px;
  background:#f3f4f6; display:flex; align-items:center; justify-content:center;
  font-size: 14px;
}
.wc-caret{ font-size: 12px; opacity:.65; }

.wc-profile-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  background:#ffffff; border:1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  min-width: 200px; overflow:hidden; z-index: 50;
}
.wc-profile-menu a, .wc-profile-menu button{
  display:block; width:100%; text-align:left;
  padding: 12px 14px; background:transparent; border:0;
  cursor:pointer; font-size:14px;
}
.wc-profile-menu a:hover, .wc-profile-menu button:hover{ background:#f9fafb; }
.wc-topbar { position: sticky; top:0; z-index: 20; }

.wc-composer { position: sticky; bottom:0; z-index: 20; }

.wc-overlay{
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  display:none; align-items:flex-end; justify-content:center;
  z-index: 60;
}
.wc-overlay.open{ display:flex; }
.wc-panel{
  width: min(720px, 96vw);
  max-height: 84vh;
  background:#ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.wc-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.wc-panel-title{ font-weight: 850; letter-spacing:-.02em; }
.wc-panel-body{ padding: 14px 16px; overflow:auto; max-height: calc(84vh - 56px); }
.wc-tiles{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 720px){ .wc-tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.wc-tile{
  border:1px solid #e5e7eb; background:#f9fafb;
  border-radius: 16px; padding: 14px;
  cursor:pointer;
}
.wc-tile-title{ font-weight: 800; }
.wc-tile-sub{ font-size: 12px; color:#6b7280; margin-top: 4px; }
/* -------------------------------------------------------
   Candy Box QA context panel (scoped)
   Safe: only affects the Candy Box overlay
------------------------------------------------------- */

#wcCandyOverlay .wc-candy-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desktop / wider: two-column layout (tiles left, context right) */
@media (min-width: 900px){
  #wcCandyOverlay .wc-candy-layout{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

/* Make sure tiles grid behaves inside the candy layout */
#wcCandyOverlay .wc-candy-layout .wc-tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 720px){
  #wcCandyOverlay .wc-candy-layout .wc-tiles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#wcCandyOverlay .wc-app-tile{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#wcCandyOverlay .wc-tile.is-active{
  outline: 2px solid rgba(17,24,39,.12);
}

#wcCandyOverlay .wc-tile-icon{
  width: 100%;
  height: 150px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
}

#wcCandyOverlay .wc-tile-icon svg{
  width: 96px;
  height: 96px;
  display:block;
}

/* Context panel */
#wcCandyOverlay .wc-candy-ctx{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px;
  min-height: 220px;
}

@media (min-width: 900px){
  #wcCandyOverlay .wc-candy-ctx{
    position: sticky;
    top: 0;
  }
}

#wcCandyOverlay .wc-candy-ctx-empty{
  color:#6b7280;
  font-size: 13px;
  padding: 6px 0;
}

#wcCandyOverlay .wc-candy-ctx-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#wcCandyOverlay .wc-candy-ctx-title{
  font-weight: 850;
  letter-spacing:-.02em;
}

#wcCandyOverlay .wc-candy-ctx-actions{
  display:flex;
  gap: 8px;
}

/* Buttons in the context panel */
#wcCandyOverlay .wc-mini-btn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  font-weight: 750;
  line-height: 1;
}

#wcCandyOverlay .wc-mini-btn:hover{
  background:#f9fafb;
}

#wcCandyOverlay .wc-mini-btn-plus{
  width: 36px;
  padding: 8px 0;
  text-align:center;
  font-size: 18px;
}

/* Section labels + lists */
#wcCandyOverlay .wc-candy-ctx-section{
  margin-top: 12px;
}

#wcCandyOverlay .wc-candy-ctx-label{
  color:#6b7280;
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 800;
}

#wcCandyOverlay .wc-candy-list{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

#wcCandyOverlay .wc-candy-item{
  text-align:left;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  font-size: 13px;
}

#wcCandyOverlay .wc-candy-item:hover{
  background:#f9fafb;
}