/* ===== BASE ===== */
body { font-family: monospace; max-width: 900px; margin: 0 auto; padding: 16px; }
pre { background: #f4f4f4; padding: 12px; overflow-x: auto; font-size: 13px; }
h2 { margin-top: 24px; }
a { color: #0066cc; }
input, select, button, textarea { font-family: monospace; padding: 6px; margin: 4px 0; }

/* ===== UTILITIES ===== */
.hidden { display: none; }
.text-muted { color: #888; }
.text-small { font-size: 12px; }
.text-detail { font-size: 13px; }
.text-mini { font-size: 11px; }
.text-hint { color: #888; font-size: 12px; }
.text-hint-detail { color: #888; font-size: 13px; }
.text-sub { color: #666; font-size: 12px; }
.text-sub-detail { color: #666; font-size: 13px; }
.text-error { color: red; }
.text-success { color: green; }
.text-link { font-size: 13px; }
.text-warn { color: #795548; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 16px; }
.ml-sm { margin-left: 8px; }
.mb-sm { margin-bottom: 8px; }

.error-msg { color: red; font-size: 13px; margin-top: 4px; display: none; }

.flex-row { display: flex; align-items: center; gap: 8px; }
.flex-row-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-gap-sm { gap: 6px; }
.flex-gap-md { gap: 8px; }
.flex-gap-lg { gap: 12px; }

/* ===== CARD ===== */
.card { border: 1px solid #ccc; padding: 12px; margin: 8px 0; cursor: default; }
.card.clickable { cursor: pointer; }
.card.clickable:hover { background: #f8f8f8; }
.card.active { border-color: #0066cc; background: #f0f6ff; }

/* ===== STATUS BADGES ===== */
.status-registered { color: blue; font-weight: bold; }
.status-not_found { color: #888; }
.status-legacy { color: orange; font-weight: bold; }
.status-icon-registered { color: #1565c0; }
.status-icon-unregistered { color: #888; }
.not-on-voxer { color: #999; }
.on-voxer { color: blue; }
.blocked { color: red; }

/* ===== BADGES ===== */
.badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
.badge-admin { background: #e3f2fd; color: #1565c0; }
.badge-member { background: #f5f5f5; color: #666; }
.badge-inline { font-size: 11px; margin-left: 6px; }
.badge-blocked { color: red; }
.badge-new { color: #ff8f00; }
.badge-public { color: #1976d2; }
.badge-role-admin { color: #1565c0; font-size: 11px; }

/* ===== BANNERS ===== */
.banner-info { background: #e3f2fd; border: 1px solid #90caf9; padding: 10px 12px; margin-bottom: 12px; }
.banner-warning { background: #fff3e0; border: 1px solid #ffe082; padding: 12px; margin-bottom: 12px; }
.banner-invite { background: #fff3e0; border: 1px solid #ffcc80; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.non-contact-banner { background: #fff8e1; border: 1px solid #ffe082; padding: 10px 12px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.non-contact-banner .label { color: #795548; font-size: 13px; }
.non-contact-banner button { font-size: 12px; }
.non-contact-banner .block-btn { color: red; border: 1px solid red; background: white; }
.non-contact-banner .spam-btn { color: #d84315; border: 1px solid #d84315; background: white; }
.banner-blocked { background: #ffebee; border-color: #ef9a9a; }

/* ===== MESSAGES ===== */
.message { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eee; }
.message b { color: #333; }
.message-timestamp { color: #aaa; font-size: 11px; margin-left: 8px; }
.message-empty { color: #888; }
.composer { display: flex; gap: 8px; margin-top: 8px; }
.composer textarea { flex: 1; }

/* ===== TO: FIELD / CHIPS ===== */
.to-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid #ccc; padding: 4px 6px; min-height: 32px; cursor: text; }
.to-field:focus-within { border-color: #0066cc; }
.to-field input { border: none; outline: none; flex: 1; min-width: 120px; padding: 4px; font-family: monospace; font-size: 13px; }
.to-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 12px; white-space: nowrap; }
.to-chip.member { background: #e3f2fd; color: #1565c0; }
.to-chip.external { background: #fff3e0; color: #e65100; }
.to-chip .remove { cursor: pointer; font-size: 14px; margin-left: 2px; opacity: 0.6; }
.to-chip .remove:hover { opacity: 1; }

/* ===== MEMBER LIST ===== */
.member-list { max-height: 200px; overflow-y: auto; border: 1px solid #eee; margin-top: 4px; }
.member-list-item { padding: 6px 10px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; }
.member-list-item:hover { background: #f0f6ff; }
.member-list-item.external-suggestion { color: #e65100; background: #fffbe6; }
.member-list-item.external-suggestion:hover { background: #fff3e0; }
.member-list-item.not-found { color: #c62828; font-style: italic; }

/* ===== GROUP OPTIONS ===== */
.group-options { margin-top: 8px; padding: 8px; background: #fafafa; border: 1px solid #eee; }

/* ===== MEMBER ROW ===== */
.member-row-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid #eee; }

/* ===== THREAD CARD ===== */
.thread-card-header { display: flex; justify-content: space-between; }
.thread-card-preview { color: #666; font-size: 12px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ===== BUTTONS ===== */
.btn-small { font-size: 12px; }
.btn-mini { font-size: 11px; }
.btn-text { color: #888; background: none; border: none; cursor: pointer; text-decoration: underline; }
.btn-danger { color: #d32f2f; border: 1px solid #d32f2f; background: white; }
.btn-danger-text { font-size: 11px; color: #d32f2f; }
.btn-accept { background: #4caf50; color: white; border: none; padding: 6px 16px; cursor: pointer; }
.btn-reject { background: white; color: #d32f2f; border: 1px solid #d32f2f; padding: 6px 16px; cursor: pointer; }

/* ===== EVENT LOG ===== */
.event-item { font-size: 12px; padding: 2px 0; border-bottom: 1px solid #eee; }
.event-timestamp { color: #888; }

/* ===== NAV ===== */
.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; flex-wrap: wrap; gap: 8px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0; font-size: 14px; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-admin-link { position: fixed; bottom: 8px; right: 12px; font-size: 12px; }
.nav-admin-link a { color: #888; }
.nav-app-switcher { font-weight: bold; font-family: monospace; padding: 4px; }

/* ===== SECTIONS ===== */
.section-label { font-size: 12px; color: #888; text-transform: uppercase; margin-top: 10px; margin-bottom: 4px; }
.empty { color: #999; font-size: 13px; font-style: italic; }

/* ===== THREAD DETAIL HEADER ===== */
.thread-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.thread-title { margin: 0; cursor: default; }
.thread-title-input { display: none; font-size: 18px; font-weight: bold; font-family: monospace; }
.thread-actions { display: flex; gap: 6px; }
.thread-subtitle { color: #888; margin: 4px 0; cursor: pointer; }

/* ===== INVITES ===== */
.copy-btn { cursor: pointer; background: #f4f4f4; border: 1px solid #ccc; padding: 4px 8px; font-size: 12px; }
.copy-btn:hover { background: #e8e8e8; }
.invite-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; border-bottom: 1px solid #eee; }
.domain-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }

/* ===== CONTACT LIST ITEMS ===== */
.contact-item { padding: 4px 0; }
.source-hint { color: #888; font-size: 10px; }