/* Reaproveita as variáveis e a maior parte das classes de /admin/admin.css —
   isto só cobre o que é específico deste portal (mais pequeno: sem coluna de
   moderação/visitante, e o formulário de perfil por cima da lista). */

.ambassador-main { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.ambassador-profile { grid-template-columns: 1fr 320px; }

/* Aviso da primeira entrada: ativar notificações neste dispositivo. */
.push-nudge {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--primary-tint); border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text);
}
.push-nudge-icon { font-size: 18px; flex: none; }
.push-nudge-text { flex: 1 1 260px; min-width: 0; line-height: 1.4; }
.push-nudge-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.push-nudge-actions button {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
}
.push-nudge-actions button.ghost { background: none; color: var(--text-secondary); border-color: transparent; font-weight: 500; }
.push-nudge-actions button:disabled { opacity: .6; }

/* Marca da faculdade na barra: logótipo se houver, senão a inicial na cor dela. */
.tenant-mark {
  flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.tenant-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ---------- computador: messenger, não painel ----------
   Em vez da barra lateral do painel de admin: uma barra fina no topo com o
   nome, os separadores e "Sair"; por baixo, um cartão centrado com a lista
   de conversas à esquerda e a conversa aberta à direita, como qualquer
   app de mensagens no browser. */
@media (min-width: 761px) {
  .admin { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
  .admin-side {
    position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; gap: 16px;
    height: 56px; padding: 0 22px; border-right: none; border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .admin-side .tenant { padding: 0; margin: 0; border: none; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
  .admin-side .tenant .tenant-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .admin-side .tenant .name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-side .tenant .plan { margin: 0; background: none; padding: 0; color: var(--text-muted); font-size: 11.5px; }
  .admin-side nav { flex-direction: row; gap: 4px; flex: 0 0 auto; }
  .admin-side .nav-item { width: auto; padding: 8px 14px; border-radius: 100px; font-size: 13.5px; }
  .admin-side .nav-item .dot { display: none; }
  .admin-side .nav-item .count { margin-left: 6px; }
  .admin-side .logout { margin: 0; flex: 1 1 0; text-align: right; }

  .admin > main {
    width: 100%; max-width: 1120px; margin: 18px auto 24px; padding: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 30, 27, .04), 0 12px 32px rgba(20, 30, 27, .05);
    height: calc(100vh - 56px - 42px);
  }
  .ambassador-main { grid-template-columns: 320px minmax(0, 1fr); height: 100%; }
  .ambassador-main .conv-list { border-right: 1px solid var(--border); overflow-y: auto; height: 100%; }
  .ambassador-main .thread { height: 100%; }
  .admin > main.admin-people { height: auto; min-height: calc(100vh - 56px - 42px); }
}

/* Em ecrãs estreitos (portátil pequeno, tablet), lista e formulário
   empilham em vez de se esmagarem lado a lado. */
@media (max-width: 1000px) {
  .admin-people, .ambassador-profile { grid-template-columns: 1fr; }
  .people-form { border-left: none; border-top: 1px solid var(--border); }
}
/* ---------- telemóvel: parece uma app de mensagens ----------
   A barra lateral vira uma barra de separadores em baixo; a lista de
   conversas ocupa o ecrã; tocar numa conversa abre-a a ecrã inteiro com um
   botão para voltar. É onde os embaixadores respondem mais (entre aulas,
   no telemóvel), por isso este layout importa mais do que o de secretária. */
@media (max-width: 760px) {
  .admin { display: block; min-height: 100vh; }
  .admin-side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    flex-direction: row; align-items: center; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: none; border-top: 1px solid var(--border); border-bottom: none;
    background: var(--surface);
  }
  .admin-side .logout { position: static; }
  /* Barra fina no topo com a marca da faculdade (a barra de separadores
     fica em baixo). Some quando uma conversa está aberta a ecrã inteiro. */
  .admin-side .tenant {
    position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 20;
    display: flex; align-items: center; gap: 10px; padding: 0 14px; margin: 0; border: none;
    border-bottom: 1px solid var(--border); background: var(--surface);
  }
  .admin-side .tenant .tenant-text { min-width: 0; }
  .admin-side .tenant .name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-side .tenant .plan { display: none; }
  .tenant-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
  main { padding-top: 48px !important; }
  .admin-side nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .admin-side .nav-item { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 6px 4px; border-radius: 8px; width: auto; }
  .admin-side .nav-item .dot { display: none; }
  .admin-side .nav-item .count { margin-left: 0; }
  .admin-side .logout { margin-top: 0; font-size: 10.5px; padding: 6px 8px; }

  main { padding-bottom: 64px !important; }
  .ambassador-main { grid-template-columns: 1fr; min-height: calc(100vh - 64px); }
  .ambassador-main .conv-list { border-right: none; max-height: none; }
  .ambassador-main .thread { display: none; }

  /* Conversa aberta: cobre o ecrã, com "voltar" no topo. */
  body.thread-open .ambassador-main .conv-list { display: none; }
  body.thread-open .ambassador-main .thread {
    display: flex; position: fixed; inset: 0; z-index: 30; background: var(--bg);
    padding-bottom: 0;
  }
  body.thread-open .admin-side { display: none; }
  .thread-back { display: none; }
  body.thread-open .thread-back {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    color: var(--primary); font-family: inherit; font-size: 13px; font-weight: 600; padding: 12px 14px 0; cursor: pointer; text-align: left;
  }
  .thread .rw-panel-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  .admin-people, .ambassador-profile { grid-template-columns: 1fr; }
  .people-form { border-left: none; border-top: 1px solid var(--border); }
}

.msg.staff { align-self: flex-end; }

.availability-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary);
  padding: 8px 0 2px; cursor: pointer;
}
.availability-toggle input { width: 15px; height: 15px; accent-color: var(--primary); }

.push-box { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.push-box h3 { margin: 0 0 6px; }
.push-box .form-note { margin: 0 0 12px; }
.push-box button { width: 100%; background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); }
.push-box button:disabled { opacity: .6; }

/* Lista de conversas com ar de app de mensagens: avatar com inicial à
   esquerda, nome + "há 2 h" em cima, pré-visualização + tipo em baixo. */
.ambassador-main .conv-item { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.ambassador-main .conv-item .avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600;
}
.ambassador-main .conv-item .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ambassador-main .conv-item .who { font-size: 14px; }
.ambassador-main .conv-item .time { font-family: inherit; font-size: 11.5px; }
.ambassador-main .conv-item .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ambassador-main .conv-item .preview { font-size: 12.5px; flex: 1; min-width: 0; }
.ambassador-main .conv-item .kind { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ambassador-main .conv-item.resolved .avatar { opacity: .55; }
.ambassador-main .conv-item.resolved .kind { color: var(--primary); }

.ambassador-main .conv-item .sub { font-size: 12px; color: var(--text-muted); margin-top: -1px; }
.ambassador-main .conv-item .unread {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Cabeçalho da caixa de entrada: "6 por responder" à esquerda, "Resolvidas ›" à direita. */
.conv-list-head.inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; padding: 14px 16px 8px; }
.inbox-head .head-title { font-size: 14px; font-weight: 700; color: var(--text); }
.inbox-head .head-link { border: none; background: none; color: var(--text-secondary); font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.inbox-head .head-link:hover { color: var(--primary); }

/* Cabeçalho da conversa: avatar, nome, interesse; Resolver em destaque. */
.thread-head .thread-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thread-head .thread-who .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.thread-head .subject { font-size: 14.5px; }
.thread-head .transfer-btn.resolve-btn { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.thread-head .transfer-btn.resolve-btn:hover { background: var(--primary-dark); color: #fff; }
.thread-head .transfer-btn.resolve-btn.reopen { background: var(--surface); color: var(--text-secondary); border-color: var(--border); font-weight: 400; }

/* Bolhas: as tuas em verde com texto branco, as do candidato brancas com
   contorno; cantos como nas apps de mensagens. */
.ambassador-main .thread-body { background: var(--surface-2); gap: 10px; }
.ambassador-main .msg .bubble { border-radius: 16px; font-size: 13.5px; padding: 9px 13px; }
.ambassador-main .msg.visitor .bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.ambassador-main .msg.ambassador .bubble, .ambassador-main .msg.staff .bubble { background: var(--primary); color: #fff; border: none; border-bottom-right-radius: 5px; }
.ambassador-main .msg .stamp { font-family: inherit; }
.ambassador-main .msg.ambassador .stamp, .ambassador-main .msg.staff .stamp { text-align: right; }

/* Publicações em cartões com miniatura. */
.people-list.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-content: start; }
.people-list.posts .lst-hint { grid-column: 1 / -1; }
.post-card { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.post-card .post-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.post-card .post-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; }
.post-card .post-thumb.no-img { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--text-muted); }
.post-card .post-badge { position: absolute; left: 8px; top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; background: rgba(0,0,0,.65); color: #fff; }
.post-card.pending .post-badge { background: #B5651D; }
.post-card .post-type { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }
.post-card .post-body { padding: 10px 12px 12px; }
.post-card .post-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.post-card .post-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.post-card .post-remove { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.post-card:hover .post-remove, .post-card:focus-within .post-remove { opacity: 1; }
@media (hover: none) { .post-card .post-remove { opacity: 1; } }

/* Conversas por responder em destaque. */
.conv-item.awaiting .who { color: var(--text); }
.conv-item.awaiting .preview { color: var(--text); font-weight: 500; }
.await-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }

/* Passar a conversa a um colega. */
.thread-head .transfer-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  border-radius: 100px; padding: 6px 12px; font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.thread-head .transfer-btn:hover { border-color: var(--primary); color: var(--primary); }
.transfer-box { padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.transfer-box select, .transfer-box input { font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.transfer-actions { display: flex; gap: 8px; }
.transfer-actions button { font-family: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); }
.transfer-actions #transferGo { background: var(--primary); color: #fff; border-color: var(--primary); }
.msg.system { align-self: center; max-width: 90%; }
.msg.system .sysnote { font-size: 12px; color: var(--text-muted); text-align: center; font-style: italic; padding: 4px 10px; }

/* Respostas guardadas (portal do embaixador). */
.saved-toggle {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 14px; font-family: inherit;
}
.saved-toggle:hover { border-color: var(--primary); color: var(--primary); }
.saved-panel { border-top: 1px solid var(--border); background: var(--surface-2); max-height: 260px; overflow-y: auto; }
.saved-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.saved-head button { border: none; background: none; color: var(--primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.saved-list { padding: 0 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.saved-item { display: flex; align-items: flex-start; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.saved-item-main { flex: 1; min-width: 0; cursor: pointer; }
.saved-item-main:hover .saved-title { color: var(--primary); }
.saved-title { font-size: 12.5px; font-weight: 600; }
.saved-shared { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-left: 4px; }
.saved-body { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.saved-del:hover { color: var(--danger); }
.saved-form { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.saved-form input, .saved-form textarea { font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

/* O ícone das respostas guardadas não é o botão Enviar: contorno discreto. */
.rw-panel-foot button.saved-toggle {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 15px;
}
.rw-panel-foot button.saved-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.saved-panel { max-height: 220px; }
.saved-list .lst-hint { padding: 0 6px 8px; font-size: 12.5px; }

/* Sugestões da instituição, no topo das Publicações. */
#promptSuggestions { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
#promptSuggestions h3 { margin: 0 0 8px; }
.prompt-suggest { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); font-size: 13px; }
.prompt-suggest .bio { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.prompt-suggest button { border: 1px solid var(--primary); color: var(--primary); background: none; border-radius: 100px; font-size: 12px; padding: 6px 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }

/* Resolver conversa. */
.thread-head .thread-actions { display: flex; gap: 6px; }
.conv-item.resolved .who, .conv-item.resolved .preview { color: var(--text-muted); }

/* Botão secundário do login: o link por email como alternativa à password. */
.login-card .login-alt { background: none; border: 1px solid var(--border); color: var(--text-secondary); margin-top: 2px; }
.login-card .login-alt:hover { border-color: var(--primary); color: var(--primary); }

/* Notas internas por conversa (só a equipa vê). */
.notes-box { border-bottom: 1px solid var(--border); background: #FFFCF3; }
.notes-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a6d3b; font-weight: 700; padding: 10px 14px 4px; }
.notes-list { padding: 0 14px; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.note-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.note-body { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.note-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.notes-form { display: flex; gap: 6px; padding: 8px 14px 12px; }
.notes-form input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: #fff; }
.notes-form button { border: none; background: var(--primary); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-family: inherit; cursor: pointer; }

/* Notas: dois botões (só para mim / partilhar) e etiqueta por nota. */
.notes-form button.share { background: none; color: var(--primary); border: 1px solid var(--primary); }
.note-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 100px; margin-right: 6px; background: var(--surface-2); color: var(--text-muted); }
.note-tag.shared { background: var(--primary-tint); color: var(--primary-dark); }

/* ---------- afinações visuais do portal do embaixador ---------- */
/* Ecrã de entrada mais acolhedor. */
.login-screen { background: linear-gradient(160deg, var(--primary-tint) 0%, var(--bg) 55%); }
.login-card { box-shadow: 0 12px 40px rgba(20,30,27,.10); border-radius: 18px; }
.login-brand { font-size: 22px; color: var(--primary-dark); }
.login-card .login-alt { border-radius: 10px; }

/* Estado vazio da conversa: um toque de ilustração em vez de texto seco. */
.ambassador-main .empty-state { text-align: center; font-size: 14px; line-height: 1.6; padding: 0 24px; }
.ambassador-main .empty-state::before { content: "💬"; display: block; font-size: 34px; margin-bottom: 10px; opacity: .8; }

/* Cabeçalho da conversa com um pouco mais de ar. */
.ambassador-main .thread-head { padding: 12px 16px; gap: 10px; }
.ambassador-main .thread-head .transfer-btn { border-radius: 100px; }

/* Bolhas com sombra subtil, mais "app". */
.ambassador-main .msg .bubble { box-shadow: 0 1px 1px rgba(20,30,27,.05); }
.ambassador-main .msg .stamp { opacity: .7; }

/* Cartões de conversa com hover mais vivo. */
.ambassador-main .conv-item { transition: background .12s; }
.ambassador-main .conv-item:hover { background: var(--surface-2); }
.ambassador-main .conv-item.awaiting { background: color-mix(in srgb, var(--primary-tint) 55%, transparent); }

/* Barra de topo (desktop) com sombra e marca mais presente. */
@media (min-width: 761px) {
  .admin-side { box-shadow: 0 1px 0 rgba(20,30,27,.04); }
  .admin-side .nav-item.active { background: var(--primary); color: #fff; }
  .admin-side .nav-item.active .count { background: rgba(255,255,255,.25); color: #fff; }
}