:root{--bg:#f2f4f7;--panel:#fff;--text:#1d2939;--muted:#667085;--line:#d0d5dd;--brand:#176b52;--danger:#b42318}html[data-theme=dark]{--bg:#111827;--panel:#1f2937;--text:#f9fafb;--muted:#9ca3af;--line:#374151;--brand:#34d399}*{box-sizing:border-box}body{margin:0;font:14px system-ui;background:var(--bg);color:var(--text)}a{color:var(--brand);text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer;background:var(--brand);color:#fff;border:0;border-radius:6px;padding:8px 12px}input,textarea,select{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:6px;padding:9px}.auth{display:grid;place-items:center;min-height:100vh}.card{width:min(420px,92vw);display:grid;gap:12px;background:var(--panel);padding:22px;border:1px solid var(--line);border-radius:10px}.warn,.notice{padding:10px;background:#fff6d8;border:1px solid #f6c94c;border-radius:6px}.error{color:var(--danger)}header{height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line)}header strong{margin-right:auto}.layout{display:grid;grid-template-columns:250px 1fr;height:calc(100vh - 48px)}aside{background:var(--panel);border-right:1px solid var(--line);padding:10px;overflow:auto}aside h3{margin:12px 0 6px}.room,.private-user{display:block;width:100%;text-align:left;margin:3px 0;background:transparent;color:var(--text);border:1px solid transparent}.room:hover,.private-user:hover{border-color:var(--line)}main{min-width:0}.chat-head{height:48px;display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid var(--line);background:var(--panel)}.chat-head strong{margin-right:auto}.chat-head input{max-width:280px}.messages{height:calc(100vh - 154px);overflow:auto;padding:12px;position:relative}.msg{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;margin:6px 0}.msg small{color:var(--muted)}#sendForm{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px;background:var(--panel);border-top:1px solid var(--line)}#sendForm textarea{height:50px;resize:none}#toast{position:fixed;right:15px;bottom:15px;background:#111;color:#fff;padding:10px;border-radius:6px;display:none}.admin{padding:12px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.table{width:100%;border-collapse:collapse;background:var(--panel)}.table th,.table td{border:1px solid var(--line);padding:7px;text-align:left}.admin-link{display:block;margin-top:20px;font-weight:700}@media(max-width:700px){.layout{grid-template-columns:1fr}aside{position:fixed;z-index:3;top:48px;bottom:0;width:260px;transform:translateX(-100%);transition:.2s}aside.open{transform:none}.messages{height:calc(100vh - 154px)}header{font-size:12px}.chat-head input{max-width:150px}}
.location-info{margin:-4px 0 2px;padding:9px 10px;border-left:4px solid var(--brand);background:var(--bg);font-weight:700}.import-card{width:min(720px,100%);margin:0 0 14px}.import-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}.button-link{display:inline-block;background:var(--brand);color:#fff;padding:8px 12px;border-radius:6px}.button-link.secondary{background:var(--muted)}.danger-button{background:var(--danger)}.preview{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}.table-wrap{overflow:auto}.preview .table{min-width:700px}
/* v4 */
body.chat-page{overflow:hidden}
.chat-page .layout{height:calc(100vh - 48px)}
.chat-page main{overflow:hidden}
.room-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center}
.room-row .room{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-active-btn{padding:5px 7px;font-size:11px;background:var(--muted)}
.active-panel{position:absolute;z-index:8;top:52px;right:12px;width:min(360px,calc(100vw - 24px));max-height:55vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
#chat{position:relative;height:100%}
.active-title{display:flex;align-items:center;gap:10px;margin-bottom:8px}.active-title strong{margin-right:auto}
.active-user{padding:7px 3px;border-bottom:1px solid var(--line)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:7px}
#sendForm{grid-template-columns:auto auto minmax(0,1fr) auto;position:relative}
.tool-btn{background:var(--muted)}
.emoji-panel{position:absolute;left:8px;bottom:70px;z-index:9;width:min(390px,calc(100vw - 30px));max-height:230px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.emoji-choice{font-size:24px;line-height:1.2;padding:7px;background:transparent;color:var(--text)}
.msg-body.emoji-large{font-size:1.5em;line-height:1.4}
.attachment{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.attachment-actions{display:flex;gap:6px;align-items:center}.button-link.small,.attachment button.small{padding:5px 8px;font-size:12px}.file-expired{color:var(--muted);font-size:12px}
.modal{position:fixed;z-index:20;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:15px}.modal[hidden]{display:none}.modal-card{width:min(520px,96vw);max-height:85vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}.file-info{display:grid;grid-template-columns:140px 1fr;gap:7px 10px}.file-info dt{font-weight:700}.file-info dd{margin:0;overflow-wrap:anywhere}
@media(max-width:700px){#sendForm{grid-template-columns:auto auto 1fr}#sendForm button[type=submit]{grid-column:auto}.attachment{align-items:flex-start;flex-direction:column}.file-info{grid-template-columns:1fr}.file-info dt{margin-top:5px}}
/* v4.1 admin/theme fixes */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#111827;--panel:#1f2937;--text:#f9fafb;--muted:#9ca3af;--line:#374151;--brand:#34d399;--danger:#f87171}
}
.admin{max-width:1600px;margin:0 auto;overflow:visible}
.admin .crud-editor{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0}
.admin .crud-editor h2{margin:0 0 10px}
.crud-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end}
.crud-form label{display:grid;gap:5px;color:var(--muted)}
.crud-form label.check{display:flex;align-items:center;gap:7px;min-height:38px;color:var(--text)}
.crud-form label.check input{width:auto}
.row-actions{white-space:nowrap}.row-actions button{margin:2px}
.admin .table-wrap{overflow:auto;max-width:100%}
.admin .table{min-width:720px}
#themeBtn{background:transparent;color:var(--text);border:1px solid var(--line)}
/* v4.2 admin: participantes, multi-setor e soft delete */
.crud-form select[multiple]{min-height:150px}
.participant-box[hidden]{display:none}
.participant-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px;max-height:420px;overflow:auto;margin:10px 0;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.participant-list label{display:flex;align-items:center;gap:8px;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.participant-list input{width:auto}.participant-list small{margin-left:auto;color:var(--muted)}

.active-user{display:flex;align-items:center;gap:8px}.active-user-name{min-width:0;flex:1}.private-mail{padding:4px 7px;line-height:1;font-size:18px;background:transparent;color:var(--text);border:1px solid var(--line)}.private-mail:hover{background:var(--bg)}

/* v4.4 seleção de setores */
.sector-field{display:grid;gap:5px;color:var(--muted)}
.sector-choices{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:6px;max-height:220px;overflow:auto;min-width:260px}
.sector-choice{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:6px;border-bottom:1px solid var(--line)}
.sector-choice:last-child{border-bottom:0}
.sector-choice label{display:flex;align-items:center;gap:7px;color:var(--text)}
.sector-choice input{width:auto}
.sector-primary{white-space:nowrap;font-size:12px;color:var(--muted)!important}
/* v4.6 login dark, mobile composer, private directory */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .warn{background:#3b2f0b;color:#fef3c7;border-color:#a16207}
}
html[data-theme=dark] .warn{background:#3b2f0b;color:#fef3c7;border-color:#a16207}
.private-heading{display:flex;align-items:center;gap:6px}.private-heading h3{flex:1}.private-search-btn{padding:3px 7px;background:transparent;color:var(--text);border:1px solid var(--line);font-size:18px;line-height:1.2}
.private-directory{margin:4px 0 8px;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.private-directory input{margin-bottom:6px}.private-directory-list{max-height:42vh;overflow:auto}
.private-directory-user{display:flex;align-items:center;gap:6px;width:100%;padding:6px 3px;border-bottom:1px solid var(--line)}
.private-directory-user:last-child{border-bottom:0}.private-directory-user span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.private-directory-user button{padding:4px 7px;font-size:17px;background:transparent;color:var(--text);border:1px solid var(--line)}
@supports (height:100dvh){.chat-page .layout{height:calc(100dvh - 48px)}}
@media(max-width:700px){
  body.chat-page{height:100dvh;min-height:100dvh}
  .chat-page .layout{height:calc(100dvh - 48px)}
  #chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}
  .messages{height:auto!important;min-height:0;overflow:auto}
  #sendForm{position:relative;z-index:5;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--panel)}
  aside{bottom:env(safe-area-inset-bottom)}
}

/* v4.8 admin users */
.compact-button{padding:5px 9px;min-height:30px}.sector-collapsible{align-self:start}.sector-panel[hidden],#userAuxBox[hidden]{display:none}.sector-panel{margin-top:7px}.simple-list{margin:8px 0 12px;padding-left:22px}.row-actions{white-space:normal}.row-actions button{margin:2px}

/* v4.9: preview de imagens no chat */
.attachment{display:block}
.attachment-meta{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px}
.attachment-image-link{display:block;width:fit-content;max-width:80%;margin:0 0 6px}
.attachment-image{display:block;max-width:100%;width:auto;height:auto;max-height:70vh;border-radius:8px;border:1px solid var(--line);object-fit:contain;background:var(--bg)}
@media(max-width:700px){.attachment-image-link{max-width:80%}.attachment-meta{align-items:flex-start;flex-direction:column}}
.password-wrap{position:relative}.password-wrap input{padding-right:44px}.password-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:34px;padding:0;background:transparent;color:var(--text);border:0}.register-sectors{border:1px solid var(--line);border-radius:6px;padding:8px;max-height:210px;overflow:auto}.register-sectors legend{padding:0 5px}.register-sectors .sector-choice{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.register-sectors input{width:auto}
.approval-hint{display:block;color:var(--muted);margin-top:4px}.approve:disabled{opacity:.45;cursor:not-allowed}

/* v5.4: alertas padronizados + respiro do composer desktop */
:root{
  --notice-bg:#fff7d6;
  --notice-text:#6b4f00;
  --notice-border:#e6b800;
  --success-bg:#eaf8ef;
  --success-text:#166534;
  --success-border:#86d19a;
  --error-bg:#fff0f0;
  --error-text:#b42318;
  --error-border:#f3a6a0;
  --info-bg:#eef6ff;
  --info-text:#174a7c;
  --info-border:#9fc7ee;
}
html[data-theme=dark]{
  --notice-bg:#3b2f0b;
  --notice-text:#fef3c7;
  --notice-border:#a16207;
  --success-bg:#102d1c;
  --success-text:#bbf7d0;
  --success-border:#15803d;
  --error-bg:#3a1515;
  --error-text:#fecaca;
  --error-border:#b91c1c;
  --info-bg:#11283e;
  --info-text:#bfdbfe;
  --info-border:#2563eb;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --notice-bg:#3b2f0b;
    --notice-text:#fef3c7;
    --notice-border:#a16207;
    --success-bg:#102d1c;
    --success-text:#bbf7d0;
    --success-border:#15803d;
    --error-bg:#3a1515;
    --error-text:#fecaca;
    --error-border:#b91c1c;
    --info-bg:#11283e;
    --info-text:#bfdbfe;
    --info-border:#2563eb;
  }
}
.warn,.notice,.success,.info,.error{
  display:block;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:7px;
  line-height:1.4;
}
.warn,.notice{background:var(--notice-bg);color:var(--notice-text);border-color:var(--notice-border)}
.success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}
.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}

/* Chat: só mensagens rolam. Composer mantém respiro visual no desktop. */
.chat-page #chat{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  height:100%;
  min-height:0;
  padding-bottom:10px;
}
.chat-page .messages{
  height:auto!important;
  min-height:0;
  overflow:auto;
}
.chat-page #sendForm{
  margin:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
}
@media(max-width:700px){
  .chat-page #chat{padding-bottom:env(safe-area-inset-bottom)}
  .chat-page #sendForm{margin:0 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* v5.5: aviso de IP nao altera geometria do chat */
.chat-page main{position:relative}
.chat-page .chat-ip-blocked{position:absolute;z-index:20;top:10px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 24px));margin:0;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.chat-page .chat-ip-blocked[hidden]{display:none!important}

/* v5.7 - alertas de mensagens privadas */
@keyframes privateUnreadPulse{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.48;transform:translateX(2px)}}
.private-user.private-unread-blink{font-weight:700;border-color:var(--brand);animation:privateUnreadPulse .85s ease-in-out infinite}
.private-unread-active .private-heading h3{font-weight:800;animation:privateUnreadPulse .85s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.private-user.private-unread-blink,.private-unread-active .private-heading h3{animation:none;text-decoration:underline}}

/* v5.10 - layout compacto para iframe ~975x570 */
@media (min-width:701px) and (max-width:1020px) and (max-height:620px){
  body{font-size:12.5px}
  header{height:38px;gap:8px;padding:0 8px}
  header button{padding:5px 8px}
  .layout,.chat-page .layout{height:calc(100vh - 38px)}
  .layout{grid-template-columns:205px minmax(0,1fr)}
  aside{padding:6px 7px}
  aside h3{margin:7px 0 4px;font-size:13px}
  .room,.private-user{margin:1px 0;padding:5px 6px}
  .room-active-btn{padding:3px 5px;font-size:10px}
  .private-search-btn{padding:2px 5px;font-size:15px}
  .private-directory{margin:2px 0 5px;padding:5px}
  .private-directory input{padding:6px;margin-bottom:4px}
  .private-directory-list{max-height:30vh}
  .private-directory-user{padding:4px 2px}
  .private-directory-user button,.private-mail{padding:2px 5px;font-size:15px}
  .admin-link{margin-top:10px}
  .chat-head{height:38px;padding:5px 7px;gap:7px}
  .chat-head input{max-width:220px;padding:6px 7px}
  .chat-page #chat{padding-bottom:5px}
  .messages{padding:6px 8px}
  .msg{padding:6px;margin:4px 0;border-radius:6px}
  .msg small{font-size:10.5px}
  .chat-page #sendForm{margin:0 7px;padding:5px;gap:5px;border-radius:6px}
  #sendForm textarea{height:38px;min-height:38px;padding:6px 7px}
  #sendForm button{padding:5px 8px}
  .tool-btn{font-size:11px}
  .emoji-panel{bottom:54px;max-height:170px;width:min(330px,calc(100vw - 220px));padding:5px}
  .emoji-choice{font-size:21px;padding:5px}
  .active-panel{top:42px;right:8px;width:min(320px,calc(100vw - 225px));max-height:62vh;padding:7px}
  .active-user{padding:4px 2px}
  .attachment{padding:5px;margin-top:5px}
  .attachment-meta{margin-top:4px;gap:5px}
  .attachment-image{max-height:48vh}
  .modal-card{max-height:82vh;padding:10px}

  /* telas administrativas no iframe */
  .admin{padding:7px;max-width:none}
  .tabs{gap:4px;margin-bottom:7px}
  .tabs button{padding:5px 8px}
  .admin .crud-editor{padding:8px;margin:7px 0}
  .admin .crud-editor h2{margin-bottom:6px;font-size:16px}
  .crud-form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
  input,textarea,select{padding:6px 7px}
  button,.button-link{padding:6px 9px}
  .table th,.table td{padding:4px 5px}
  .participant-list{max-height:290px;gap:4px;padding:5px}
  .sector-choices{max-height:160px;padding:4px}
  .sector-choice{padding:4px}

  /* login/perfil/cadastro dentro iframe */
  .auth{min-height:100dvh;padding:8px}
  .card{gap:7px;padding:12px;width:min(410px,96vw)}
  .card h1{font-size:20px;margin:0 0 3px}
  .warn,.notice,.success,.info,.error{padding:7px 8px}
}

/* v5.12 - leitura de mensagens sob demanda */
.msg-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.msg-time{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.msg-viewers{border:0;background:transparent;color:var(--muted);padding:0 2px;min-width:auto;line-height:1;font-size:14px;cursor:pointer}
.msg-viewers:hover,.msg-viewers:focus{color:var(--brand);outline:none}
.message-viewers-popover{position:fixed;z-index:1200;width:min(330px,calc(100vw - 16px));max-height:260px;overflow:auto;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.message-viewers-popover[hidden]{display:none!important}
.message-viewers-list{margin-top:6px;display:grid;gap:4px}
.message-viewers-list>div{padding:4px 0;border-top:1px solid var(--line)}
@media(max-width:700px){.msg-viewers{font-size:16px;padding:2px 4px}.message-viewers-popover{max-height:45vh}}
/* v5.14 imagem fixada por sala */
.pin-file{background:#7c3aed}
.pinned-room-overlay{position:absolute;z-index:18;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.88);padding:0;cursor:pointer;overflow:hidden}
.pinned-room-overlay[hidden]{display:none!important}
.pinned-room-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;outline:none;overflow:hidden}
.pinned-room-card img{display:block;max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.pinned-room-hint{color:#fff;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:999px;font-size:12px}
@media(max-width:700px){.pinned-room-overlay{padding:0}.pinned-room-card img{max-width:90%;max-height:90%}}

/* v5.16 - overlay fixado fora do scroll de mensagens */
.chat-page .messages-shell{position:relative;min-height:0;height:100%;overflow:hidden}
.chat-page .messages-shell>.messages{height:100%!important;min-height:0;overflow:auto}
.chat-page .messages-shell>.pinned-room-overlay{position:absolute;z-index:500;inset:0;margin:0;transform:none}
.chat-page .messages-shell>.pinned-room-overlay .pinned-room-card{position:relative;z-index:501}
.chat-page .messages-shell>.pinned-room-overlay img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain}

.sound-unlock{font-size:.78rem;padding:.28rem .5rem;border:1px solid var(--border,#888);border-radius:.35rem;background:var(--panel,#fff);color:var(--text,#111)}
[data-theme=dark] .sound-unlock{background:#26303a;color:#f2f5f7;border-color:#52606d}
@media(max-width:700px){.sound-unlock{font-size:.72rem;padding:.22rem .4rem}}


/* v5.18 - mensagens direita/esquerda + alertas de sala */
.messages .msg{max-width:78%;width:max-content;min-width:min(260px,78%)}
.messages .msg-other{margin-right:auto;margin-left:0}
.messages .msg-own{margin-left:auto;margin-right:0;background:color-mix(in srgb,var(--brand) 10%,var(--panel));border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.messages .msg-own .msg-head{flex-direction:row}
.room.room-unread-blink{font-weight:800;border-color:var(--brand);animation:privateUnreadPulse .85s ease-in-out infinite}
.room-unread-active aside>h3:first-of-type{font-weight:800}
.sound-settings-card{display:grid;gap:12px}
.sound-settings-card label{display:grid;gap:5px}
.sound-setting-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.sound-setting-row button{white-space:nowrap}
@media(max-width:700px){.messages .msg{max-width:88%;min-width:min(220px,88%)}.sound-setting-row{grid-template-columns:1fr}.sound-setting-row button{width:100%}}
@media(prefers-reduced-motion:reduce){.room.room-unread-blink{animation:none;text-decoration:underline}}

/* v5.18.1: alinhamento robusto das mensagens */
.chat-page .messages{display:flex;flex-direction:column;align-items:stretch}
.chat-page .messages>.msg{flex:0 0 auto}
.chat-page .messages>.msg-other{align-self:flex-start;margin-left:0!important;margin-right:auto!important}
.chat-page .messages>.msg-own{align-self:flex-end;margin-left:auto!important;margin-right:0!important}

/* v5.20 - cor por autor em salas */
.msg-author{font-weight:500}
.msg-author-colored{color:hsl(var(--author-hue) 68% 38%)}
html[data-theme=dark] .msg-author-colored{color:hsl(var(--author-hue) 72% 70%)}
.msg-author-admin{font-weight:800}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .msg-author-colored{color:hsl(var(--author-hue) 72% 70%)}}