:root {
  --bg: #eae6df;
  --panel: #ffffff;
  --panel-2: #f0f2f5;
  --hover: #f5f6f6;
  --selected: #f0f2f5;
  --border: #e9edef;
  --text: #111b21;
  --muted: #667781;
  --icon: #54656f;
  --accent: #00a884;
  --accent-strong: #008069;
  --accent-soft: #d9fdd3;
  --chat-bg: #efeae2;
  --pattern-color: rgba(84, 101, 111, .07);
  --mine: #d9fdd3;
  --theirs: #ffffff;
  --bubble-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  --sys-bg: #ffffff;
  --tick-read: #53bdeb;
  --danger: #ea0038;
  --online: #25d366;
  --away: #f5a623;
  --busy: #ea0038;
  --offline: #aebac1;
  --shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1317;
    --panel: #111b21;
    --panel-2: #202c33;
    --hover: #202c33;
    --selected: #2a3942;
    --border: #222d34;
    --text: #e9edef;
    --muted: #8696a0;
    --icon: #aebac1;
    --accent: #00a884;
    --accent-strong: #06cf9c;
    --accent-soft: #005c4b;
    --chat-bg: #0b141a;
    --pattern-color: rgba(255, 255, 255, .035);
    --mine: #005c4b;
    --theirs: #202c33;
    --bubble-shadow: 0 1px .5px rgba(0, 0, 0, .3);
    --sys-bg: #182229;
    --shadow: 0 2px 10px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14.2px/1.4 "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.ico { width: 24px; height: 24px; fill: currentColor; display: block; }

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 24px;
  padding: 8px 18px;
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 500;
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn {
  border: 0; background: transparent; cursor: pointer; color: var(--icon);
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0;
}
.icon-btn:hover { background: rgba(84, 101, 111, .1); }

input, select, textarea {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
.form-error { color: var(--danger); margin: 0; }

/* ---------- Login ---------- */
.login {
  height: 100%; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(var(--accent) 0 220px, var(--bg) 220px);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border-radius: 6px; padding: 32px; display: grid; gap: 16px; box-shadow: var(--shadow);
}
.login-card label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.login-card input { color: var(--text); font-size: 15px; padding: 10px 12px; }
.login-card .btn { padding: 10px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.brand img { width: 44px; height: 44px; }

/* ---------- Layout ---------- */
.app { display: flex; height: 100%; max-width: 1700px; margin: 0 auto; background: var(--panel); box-shadow: var(--shadow); }
.sidebar {
  width: 30%; min-width: 320px; max-width: 460px; flex: none; position: relative;
  background: var(--panel); border-right: 1px solid var(--border);
}
.side-panel { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.chat { flex: 1; display: flex; min-width: 0; position: relative; }

.side-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px 6px 18px; height: 60px; }
.side-head h1 { flex: 1; margin: 0; font-size: 22px; font-weight: 700; color: var(--accent-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head { background: var(--accent-strong); color: #fff; padding-left: 8px; height: 64px; }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 500; }
.panel-head .icon-btn { color: #fff; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: 44px; z-index: 20; min-width: 210px; display: grid;
  background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 8px 0;
}
.menu button { border: 0; background: none; text-align: left; padding: 11px 24px; cursor: pointer; }
.menu button:hover { background: var(--hover); }

.search { position: relative; margin: 4px 12px 8px; }
.search input {
  width: 100%; border: 0; border-radius: 8px; background: var(--panel-2);
  padding: 9px 12px 9px 50px; font-size: 14.5px;
}
.search input:focus { box-shadow: 0 0 0 2px var(--accent); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--icon); pointer-events: none; }
.search-icon svg.ico { width: 20px; height: 20px; }

.chips { display: flex; gap: 8px; padding: 2px 14px 10px; overflow-x: auto; scrollbar-width: none; }
.chip {
  border: 0; background: var(--panel-2); color: var(--muted); border-radius: 16px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap; font-size: 14px;
}
.chip:hover { background: var(--selected); }
.chip.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; }
.chip span:empty { display: none; }
.chip span { font-size: 12px; }

.list { flex: 1; overflow-y: auto; min-height: 0; }
.list-section { padding: 16px 30px 10px; font-size: 15px; color: var(--accent-strong); }
.item {
  display: flex; align-items: center; gap: 14px; padding: 0 15px 0 13px; cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left; height: 72px;
}
.item:hover { background: var(--hover); }
.item.active { background: var(--selected); }
.item-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--border); padding-right: 2px; }
.item:last-child .item-main { border-bottom: 0; }
.item-top, .item-bottom { display: flex; align-items: center; gap: 6px; }
.item-name { font-size: 16.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-time { font-size: 12px; color: var(--muted); flex: none; }
.item.unread .item-time { color: var(--accent); font-weight: 600; }
.item-sub { flex: 1; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.item-sub .txt { overflow: hidden; text-overflow: ellipsis; }
.item.offline .item-name { color: var(--muted); }
.list-empty { padding: 40px 30px; color: var(--muted); text-align: center; }
.action-item .avatar { background: var(--accent) !important; }

.me {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--panel-2);
}
.me-info { flex: 1; min-width: 0; display: grid; }
.me-info strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-info span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me select { padding: 4px 6px; font-size: 12.5px; border-radius: 6px; }
.avatar-btn { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.me .avatar { width: 40px; height: 40px; font-size: 15px; }

.badge {
  background: var(--accent); color: #fff; border-radius: 12px; padding: 0 6px;
  font-size: 12px; font-weight: 600; min-width: 20px; height: 20px; line-height: 20px; text-align: center; flex: none;
}

/* Avatar com indicador de status */
.avatar {
  position: relative; width: 49px; height: 49px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 500; font-size: 17px; color: #fff;
}
.avatar svg.ico { width: 26px; height: 26px; }
.avatar .dot {
  position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--panel); background: var(--offline);
}
.dot.online { background: var(--online) !important; }
.dot.away { background: var(--away) !important; }
.dot.busy { background: var(--busy) !important; }

/* ---------- Conversa ---------- */
.chat-bg {
  background-color: var(--chat-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22h26a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H30l-8 6v-6h-4a6 6 0 0 1-6-6V28a6 6 0 0 1 6-6z'/%3E%3Ccircle cx='118' cy='30' r='9'/%3E%3Cpath d='M112 30h12M118 24v12'/%3E%3Cpath d='M86 78l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M20 104c8-8 16 8 24 0s16 8 24 0'/%3E%3Crect x='112' y='104' width='26' height='20' rx='4'/%3E%3Cpath d='M112 108l13 9 13-9'/%3E%3Ccircle cx='54' cy='140' r='3'/%3E%3Ccircle cx='140' cy='70' r='3'/%3E%3Cpath d='M40 66l6 6m0-6l-6 6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px;
}
@media (prefers-color-scheme: dark) {
  .chat-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22h26a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H30l-8 6v-6h-4a6 6 0 0 1-6-6V28a6 6 0 0 1 6-6z'/%3E%3Ccircle cx='118' cy='30' r='9'/%3E%3Cpath d='M112 30h12M118 24v12'/%3E%3Cpath d='M86 78l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M20 104c8-8 16 8 24 0s16 8 24 0'/%3E%3Crect x='112' y='104' width='26' height='20' rx='4'/%3E%3Cpath d='M112 108l13 9 13-9'/%3E%3Ccircle cx='54' cy='140' r='3'/%3E%3Ccircle cx='140' cy='70' r='3'/%3E%3Cpath d='M40 66l6 6m0-6l-6 6'/%3E%3C/g%3E%3C/svg%3E"); }
}
.empty-chat {
  margin: auto; text-align: center; color: var(--muted); padding: 16px; max-width: 460px;
}
.empty-chat img { width: 96px; opacity: .9; }
.empty-chat h2 { color: var(--text); font-weight: 300; font-size: 30px; margin: 18px 0 10px; }
.chat:has(#empty-chat:not([hidden])) { background: var(--panel-2); border-bottom: 6px solid var(--accent); }

.chat-inner { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; flex: none;
  background: var(--panel-2); border-left: 1px solid var(--border);
}
.chat-head .avatar { width: 40px; height: 40px; font-size: 15px; }
.chat-title { flex: 1; min-width: 0; display: grid; }
.chat-title strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.chat-title span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-btn { display: none; }

.messages { flex: 1; overflow-y: auto; padding: 12px 7% 8px; display: flex; flex-direction: column; min-height: 0; }
.messages::before { content: ""; margin-top: auto; }
.day-sep, .sys-msg {
  align-self: center; font-size: 12.5px; color: var(--muted); background: var(--sys-bg);
  border-radius: 7.5px; padding: 5px 12px; margin: 10px 0; box-shadow: var(--bubble-shadow); text-align: center; max-width: 85%;
}
.day-sep { text-transform: uppercase; }
.load-more { align-self: center; margin-bottom: 8px; }

.msg { max-width: min(640px, 65%); display: flex; flex-direction: column; align-self: flex-start; margin-top: 2px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.first { margin-top: 10px; }
.bubble {
  background: var(--theirs); border-radius: 7.5px; box-shadow: var(--bubble-shadow);
  padding: 6px 7px 8px 9px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; font-size: 14.2px;
}
.msg.mine .bubble { background: var(--mine); }
/* "Rabinho" do balão na primeira mensagem de cada sequência */
.msg.first .bubble::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit;
}
.msg.first:not(.mine) .bubble { border-top-left-radius: 0; }
.msg.first:not(.mine) .bubble::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.msg.first.mine .bubble { border-top-right-radius: 0; }
.msg.first.mine .bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg.pending .bubble { opacity: .75; }
.msg.failed .bubble { outline: 1px solid var(--danger); cursor: pointer; }
.msg-author { font-size: 12.8px; font-weight: 500; margin-bottom: 2px; display: block; }
.bubble a { color: #027eb5; }
.meta {
  float: right; margin: 6px 0 -6px 12px; font-size: 11px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px; position: relative; top: 4px; white-space: nowrap;
}
.tick svg.ico { width: 16px; height: 11px; }
.tick.read { color: var(--tick-read); }
.file-card {
  display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: inherit !important;
  background: rgba(11, 20, 26, .05); border-radius: 6px; padding: 10px 12px; min-width: 220px;
}
.file-card .file-icon { color: var(--icon); }
.file-card .file-name { font-weight: 500; display: block; }
.file-card .file-size { font-size: 12px; color: var(--muted); }
.thumb { display: block; max-width: 300px; max-height: 300px; border-radius: 6px; margin: -2px -3px 2px -5px; cursor: zoom-in; }

.composer {
  position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 8px 14px 10px;
  background: var(--panel-2); flex: none;
}
.typing { position: absolute; left: 20px; top: -22px; font-size: 12.5px; color: var(--accent-strong); font-style: italic; }
.typing:empty { display: none; }
.input-wrap { flex: 1; background: var(--panel); border-radius: 8px; padding: 9px 12px; display: flex; min-height: 42px; }
.composer textarea {
  flex: 1; resize: none; max-height: 140px; border: 0; padding: 0; background: transparent; font-size: 15px; line-height: 1.4;
}
.composer textarea:focus { box-shadow: none; }
.send-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.send-btn:hover { background: var(--accent-strong); }
.drop-hint {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 500;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent); border: 3px dashed var(--accent); pointer-events: none;
}

.shake { animation: shake .5s; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}

/* ---------- Avisos ---------- */
.banner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #ffd279; color: #111b21; padding: 8px 18px; border-radius: 0 0 8px 8px; font-size: 13.5px; box-shadow: var(--shadow);
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #3b4a54; color: #fff; padding: 12px 20px; border-radius: 6px; box-shadow: var(--shadow); max-width: calc(100% - 32px);
}

/* ---------- Modal ---------- */
dialog {
  border: 0; padding: 0; background: transparent; color: var(--text);
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px);
}
dialog::backdrop { background: rgba(11, 20, 26, .55); }
.modal-card {
  background: var(--panel); border-radius: 6px; box-shadow: var(--shadow);
  display: grid; gap: 16px; padding: 20px 24px; max-height: calc(100vh - 32px); overflow: auto;
}
.modal-card header { display: flex; align-items: center; justify-content: space-between; }
.modal-card h2 { margin: 0; font-size: 19px; font-weight: 500; }
.modal-card footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--accent-strong); }
.field input, .field select { color: var(--text); font-size: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.check-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; }
.check-item:hover { background: var(--hover); }
.check-item input { accent-color: var(--accent); width: 18px; height: 18px; }
.check-item .avatar { width: 36px; height: 36px; font-size: 14px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.member-row .avatar { width: 40px; height: 40px; font-size: 15px; }
.member-row .grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 12.5px; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th, table.grid td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.grid th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.pill { font-size: 11.5px; padding: 2px 9px; border-radius: 10px; background: var(--panel-2); white-space: nowrap; }
.pill.ok { color: var(--accent-strong); }
.pill.off { color: var(--danger); }

.img-viewer { max-width: 100%; max-height: 75vh; display: block; margin: auto; border-radius: 6px; }

.layout-options { display: grid; gap: 10px; }
.layout-option {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px;
}
.layout-option:hover { background: var(--hover); }
.layout-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.layout-option input { accent-color: var(--accent); margin-top: 3px; flex: none; }
.layout-option > span { display: grid; gap: 3px; }

/* ---------- Estilo BeeBEEP: janela principal compacta ---------- */
.layout-classic .app { max-width: 480px; }
.layout-classic .sidebar { width: 100%; max-width: none; min-width: 0; border-right: 0; }
.layout-classic .chat, .layout-classic .chips { display: none !important; }
.layout-classic .side-head { height: 52px; }
.layout-classic .side-head h1 { font-size: 19px; }
.layout-classic .list-section { padding: 12px 16px 6px; font-size: 13.5px; }
.layout-classic .item { height: 56px; gap: 11px; padding: 0 12px 0 10px; }
.layout-classic .item .avatar { width: 38px; height: 38px; font-size: 14px; }
.layout-classic .item-name { font-size: 15px; }
.layout-classic .item-sub { font-size: 12.5px; }

/* ---------- Janela de uma conversa ---------- */
.popup .app { max-width: none; box-shadow: none; }
.popup .sidebar { display: none !important; }
.popup .chat { display: flex !important; }
.popup .back-btn { display: none !important; }
.popup .chat-head { border-left: 0; }
.popup .messages { padding: 10px 12px 6px; }
.popup .msg { max-width: 85%; }

/* ---------- Telas estreitas ---------- */
@media (max-width: 760px) {
  .app { box-shadow: none; }
  .sidebar { width: 100%; max-width: none; min-width: 0; border-right: 0; }
  .chat { display: none; }
  .app.chat-open .sidebar { display: none; }
  .app.chat-open .chat { display: flex; }
  .back-btn { display: inline-flex; }
  .chat-head { padding: 0 8px; gap: 8px; }
  .messages { padding: 10px 12px 6px; }
  .msg { max-width: 85%; }
  .field-row { grid-template-columns: 1fr; }
}