/* map-comments.css v1.2 — Comentários no Mapa 2D (map-comments.js). O painel usa as classes do map-tracks.css (.mt-*); o feed é .mc-feed. */
.mc-pin { background: none; border: 0; }
.mc-pin span {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px;
    background: var(--color-magenta, #FF5B2E); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    transform: rotate(-45deg); transform-origin: center;
}
.mc-pin svg { width: 15px; height: 15px; fill: #fff; transform: rotate(45deg); }
.mc-pin.pending span, .mc-pin.private span { opacity: .6; border-style: dashed; }

.mc-badge { background: none; border: 0; }
.mc-badge span {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; cursor: pointer;
    background: var(--color-magenta, #FF5B2E); color: #fff; font: 700 12px var(--font-display, sans-serif);
    border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); white-space: nowrap;
}
.mc-badge svg { width: 12px; height: 12px; fill: #fff; }

.mc-area { stroke: var(--accent-primary, #3FA9F5); fill: var(--accent-primary, #3FA9F5); }
body.mc-placing #map, body.mc-placing .leaflet-container { cursor: crosshair; }
body.mc-placing #toggleCommentsBtn { border-color: var(--color-magenta, #FF5B2E); color: var(--color-magenta, #FF5B2E); }

.mc-popup .leaflet-popup-content-wrapper { background: var(--glass-bg, rgba(22, 41, 61, .95)); color: var(--text-primary, #F4F7FA); border-radius: 14px; }
.mc-popup .leaflet-popup-tip { background: var(--glass-bg, rgba(22, 41, 61, .95)); }
.mc-popup .leaflet-popup-content { margin: 14px 16px; font-family: var(--font-body, sans-serif); font-size: 14px; }
.mc-popup a.leaflet-popup-close-button { color: var(--text-secondary, rgba(244, 247, 250, .6)); }
.mc-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary, rgba(244, 247, 250, .6)); margin: 0 18px 6px 0; }
.mc-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-magenta, #FF5B2E); flex: none; }
.mc-dot svg { width: 10px; height: 10px; fill: #fff; }
.mc-author { display: block; font-family: var(--font-display, sans-serif); font-size: 16px; }
/* autor + amizade (logado): o nome leva ao perfil público (pessoa.html) */
.mc-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.leaflet-container a.mc-author, a.mc-author { color: inherit; text-decoration: none; font-weight: 700; }
.leaflet-container a.mc-author:hover, a.mc-author:hover { color: #3FA9F5; text-decoration: underline; }
.mc-who .mc-btn { padding: 4px 10px; font-size: 12px; }
.mc-tag { font-size: 12px; opacity: .75; white-space: nowrap; }
.mc-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.mc-date { color: var(--text-muted, rgba(244, 247, 250, .4)); }
.mc-note { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary, rgba(244, 247, 250, .6)); }
.mc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mc-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer; text-decoration: none;
    background: rgba(255, 255, 255, .06); color: var(--text-primary, #F4F7FA) !important; border: 1px solid var(--glass-border, rgba(255, 255, 255, .12));
    font: 600 13px var(--font-body, sans-serif);
}
.mc-btn:hover { border-color: var(--accent-primary, #3FA9F5); }
.mc-btn.mc-primary { background: var(--color-magenta, #FF5B2E); border-color: transparent; color: #fff !important; }
.mc-btn:disabled { opacity: .5; cursor: wait; }
.mc-form label { display: block; font-size: 12px; color: var(--text-secondary, rgba(244, 247, 250, .6)); margin-top: 8px; }
.mc-form input:not([type=radio]), .mc-form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border-radius: 10px; resize: vertical;
    background: rgba(255, 255, 255, .06); color: var(--text-primary, #F4F7FA); border: 1px solid var(--glass-border, rgba(255, 255, 255, .12)); font: 14px var(--font-body, sans-serif);
}
.mc-form input:focus, .mc-form textarea:focus { outline: none; border-color: var(--accent-primary, #3FA9F5); }
.mc-vis { display: flex; gap: 6px; margin-top: 10px; }
.mc-vis label { margin: 0; }
.mc-vis input { position: absolute; opacity: 0; pointer-events: none; }
.mc-vis span { display: inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-border, rgba(255, 255, 255, .12)); color: var(--text-primary, #F4F7FA); cursor: pointer; font-size: 13px; }
.mc-vis input:checked + span { border-color: var(--accent-primary, #3FA9F5); background: rgba(63, 169, 245, .15); }

.mc-sw { display: grid; place-items: center; background: var(--color-magenta, #FF5B2E) !important; }
.mc-sw svg { width: 9px; height: 9px; fill: #fff; }
/* feed (clicar num comentário): computador = coluna à direita, abaixo da barra; celular = tela cheia */
.mc-feed {
    position: fixed; right: 16px; top: calc(var(--ste-header-h, 64px) + 12px); bottom: 16px; z-index: 1002;
    width: 400px; max-width: calc(100vw - 32px); display: flex; flex-direction: column;
    background: var(--glass-bg, rgba(22, 41, 61, .95)); color: var(--text-primary, #F4F7FA);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, .1)); border-radius: var(--glass-radius, 16px);
    box-shadow: var(--glass-shadow, 0 12px 40px rgba(0, 0, 0, .45)); backdrop-filter: blur(14px); overflow: hidden;
}
.mc-feed[hidden] { display: none; }
.mc-feed header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .1)); }
.mc-feed-title { min-width: 0; font-family: var(--font-display, sans-serif); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-feed-title i { color: var(--color-magenta, #FF5B2E); margin-right: 4px; }
.mc-feed-title small { margin-left: 6px; font: 600 12px var(--font-body, sans-serif); color: var(--text-secondary, rgba(244, 247, 250, .6)); }
.mc-feed-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.mc-card { padding: 14px 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border, rgba(255, 255, 255, .08)); }
.mc-card:first-child { border-color: rgba(63, 169, 245, .5); }
.mc-card .mc-eyebrow { margin-right: 0; }
.mc-card .mc-text { font-size: 14.5px; }
.mc-lv { margin-left: 6px; font-size: 13px; }
.mc-feed-sep { margin: 8px 2px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, rgba(244, 247, 250, .6)); }
.mc-feed-more { padding: 10px 0 4px; text-align: center; font-size: 12.5px; color: var(--text-muted, rgba(244, 247, 250, .45)); }
.mc-feed-more:empty { min-height: 1px; padding: 0; }
@keyframes mc-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(-4px); } }
.mc-pin.mc-hop span { animation: mc-hop .7s ease 2; }
@media (max-width: 768px) {
    .mc-feed { inset: 0; width: auto; max-width: none; border-radius: 0; border: 0; z-index: 3000; }
    .mc-feed header { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
    .mc-feed .mt-x { font-size: 28px; }
    .mc-feed-body { padding: 12px 12px max(20px, env(safe-area-inset-bottom)); }
}

.mc-snip { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary, rgba(244, 247, 250, .6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }