:root {
  --bg: #1e1f29;
  --panel: #262836;
  --line: #343746;
  --text: #e6e6ee;
  --muted: #8b8fa3;
  --accent: #4f8cff;
  --danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }
.spacer { flex: 1; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 16px; }
.brand span { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 12px; }
.pill { background: #2f3245; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.status { font-size: 12px; }
.status.on { color: #50fa7b; }
.status.off { color: var(--danger); }
select, .btn, .icon {
  background: #2f3245; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover, select:hover, .icon:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; user-select: none; }
.badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; }
.icon { padding: 2px 9px; font-size: 18px; line-height: 1; }

.layout { flex: 1; display: flex; min-height: 0; }
#editorWrap { flex: 1; min-width: 0; }
.CodeMirror {
  height: 100%; font-family: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 14px;
}
#editorWrap { height: 100%; }
#editorWrap .CodeMirror { height: 100%; }

/* timestamp gutter */
.ts-gutter { width: 78px; background: #21222c; border-right: 1px solid var(--line); }
.ts-mark {
  font-size: 11px; color: var(--muted); text-align: right; padding-right: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default;
}
.ts-mark.fresh { color: #8be9fd; }
.no-ts .ts-gutter { display: none; }

/* files panel */
.files {
  width: 320px; background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 12px; gap: 10px; overflow-y: auto;
}
.files-head { display: flex; justify-content: space-between; align-items: center; }
.drop {
  border: 2px dashed var(--line); border-radius: 10px; padding: 14px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--accent); background: rgba(79, 140, 255, .08); }
.drop p { margin: 4px 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.upload-msg { font-size: 12px; min-height: 16px; }
.upload-msg.err { color: var(--danger); }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex; gap: 10px; align-items: center; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #2b2d3d;
}
.thumb {
  width: 48px; height: 48px; flex: none; border-radius: 6px; background: #1c1d27;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 700; color: #ff7676; cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-meta { flex: 1; min-width: 0; }
.file-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name:hover { color: var(--accent); }
.file-sub { font-size: 11px; color: var(--muted); }
.file-actions { display: flex; gap: 4px; }
.file-actions button, .file-actions a {
  background: none; border: 1px solid var(--line); color: var(--text); border-radius: 5px;
  font-size: 12px; padding: 3px 7px; cursor: pointer; text-decoration: none;
}
.file-actions .del:hover { border-color: var(--danger); color: var(--danger); }

/* viewer */
.viewer { position: fixed; inset: 0; background: rgba(10, 10, 16, .92); z-index: 50; display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; }

@media (max-width: 720px) {
  .files { position: absolute; right: 0; top: 0; bottom: 0; width: 88%; z-index: 20; }
  .layout { position: relative; }
}

/* chat */
.chat {
  width: 320px; background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.chat.hidden { display: none; }
.chat .files-head { padding: 12px 12px 8px; gap: 8px; }
.chat .files-head strong { flex: none; }
.me-chip {
  flex: 1; min-width: 0; text-align: right; font-size: 12px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg .who { font-size: 11px; margin: 0 6px 2px; font-weight: 600; }
.bubble {
  padding: 7px 11px; color: #fff; white-space: pre-wrap; word-break: break-word;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.msg.mine .bubble { border-bottom-right-radius: 4px; }
.msg.theirs .bubble { border-bottom-left-radius: 4px; }
.msg .when { font-size: 10px; color: var(--muted); margin: 2px 6px 0; }
.chat-empty { margin: auto; color: var(--muted); text-align: center; font-size: 13px; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea {
  flex: 1; resize: none; max-height: 120px; background: #1c1d27; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit;
}
.chat-form textarea:focus { outline: none; border-color: var(--accent); }
@media (max-width: 720px) {
  .chat { position: absolute; right: 0; top: 0; bottom: 0; width: 88%; z-index: 21; }
}

/* room menu */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); padding: 6px; display: flex; flex-direction: column;
}
.menu-pop button {
  background: none; border: 0; color: var(--text); text-align: left; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font: inherit;
}
.menu-pop button:hover { background: #2f3245; }
.danger-text { color: var(--danger) !important; }
.icon.danger-text:hover { border-color: var(--danger); }

/* chat: actions, replies, images */
.msg .meta { display: flex; gap: 8px; align-items: center; margin: 2px 6px 0; font-size: 10px; color: var(--muted); }
.msg .meta button {
  background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer;
}
.msg .meta button:hover { color: var(--text); text-decoration: underline; }
.msg .meta .del:hover { color: var(--danger); }
.msg .when { margin: 0; }
.msg.flash .bubble { outline: 2px solid #fff; outline-offset: 2px; }
.quote {
  background: rgba(0, 0, 0, .25); border-left: 3px solid rgba(255, 255, 255, .7); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 6px; font-size: 12px; cursor: pointer; max-width: 100%;
}
.quote .qn { font-weight: 700; display: block; }
.quote .qt { display: block; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote.gone { cursor: default; font-style: italic; opacity: .8; }
.bubble img.chat-img {
  display: block; max-width: 100%; max-height: 220px; border-radius: 8px; cursor: zoom-in; background: #0003;
}
.bubble .cap { margin-top: 6px; }
.msg.has-img { max-width: 88%; }
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line);
  background: #2b2d3d; border-left: 3px solid var(--accent);
}
.reply-bar.hidden { display: none; }
.reply-bar-text { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar-text b { color: var(--text); }
.attach-bar img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.chat-msg { padding: 0 12px; }
.chat-sys { align-self: center; font-size: 11px; color: var(--muted); background: #2f3245; padding: 3px 10px; border-radius: 999px; }
.overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 16, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}

/* notifications bell */
#bellBtn { padding: 6px 9px; }
#bellBtn.on { border-color: #50fa7b; }
#bellBtn.off { opacity: .75; }

/* ---- phone layout: chat first, bottom tabs (Chat | Code | Files) ---- */
.tabs { display: none; }
@media (max-width: 720px) {
  html, body { height: 100%; }
  body { height: 100dvh; }
  .topbar { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .brand { white-space: nowrap; }
  .brand span { display: none; }
  .pill { white-space: nowrap; }
  /* language + timestamps (Code tab only) drop onto their own second row */
  .topbar > #lang, .topbar > .toggle { order: 5; }
  #chatBtn, #filesBtn, #copyBtn, #closeChat, #closeFiles { display: none; }
  body:not(.m-view-code) #lang, body:not(.m-view-code) .toggle { display: none; }
  #lang { max-width: 110px; }
  .toggle { font-size: 12px; }
  .status { font-size: 11px; }

  .layout { position: relative; }
  #editorWrap, #chatPanel, #filesPanel {
    display: none !important; position: static; width: 100%; flex: 1; min-height: 0; border: 0;
  }
  body.m-view-code #editorWrap { display: block !important; }
  body.m-view-chat #chatPanel { display: flex !important; }
  body.m-view-files #filesPanel { display: flex !important; }

  .tabs {
    display: flex; background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs button {
    flex: 1; position: relative; background: none; border: 0; color: var(--muted); font: inherit;
    font-size: 12px; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  }
  .tabs button .ti { font-size: 18px; line-height: 1.1; }
  .tabs button.active { color: var(--accent); }
  .tabs .badge { position: absolute; top: 3px; left: calc(50% + 8px); }

  .chat-form textarea { font-size: 16px; }   /* 16px stops phones zooming in on focus */
  .msg { max-width: 90%; }
  .msg .meta { gap: 12px; }
  .msg .meta button { font-size: 12px; padding: 6px 2px; }
  .menu-pop { right: 0; }
}