/* DiploTalk visual layer for the self-hosted Zulip app.
   Keeps Zulip's interaction model intact while applying DiploTalk's
   diplomatic navy, ivory and gold presentation. */

:root {
  --dt-navy: #06192d;
  --dt-navy-deep: #03111f;
  --dt-ink: #dce8f2;
  --dt-muted: #91a8bc;
  --dt-gold: #c9a44a;
  --dt-panel: rgba(5, 24, 43, 0.88);
  --dt-panel-strong: rgba(3, 17, 31, 0.94);
  --dt-line: rgba(201, 164, 74, 0.24);
}

html,
body {
  background: var(--dt-navy-deep) !important;
}

body::before {
  animation: diplotalk-globe-drift 56s ease-in-out infinite alternate;
  background:
    linear-gradient(90deg, rgba(3, 17, 31, 0.94), rgba(3, 17, 31, 0.40) 48%, rgba(3, 17, 31, 0.88)),
    url("/static/diplotalk/globe-network.jpg") center / cover no-repeat;
  content: "";
  inset: 0;
  opacity: 0.74;
  pointer-events: none;
  position: fixed;
  transform: scale(1.08);
  z-index: 0;
}

/* Keep the animated world layer behind Zulip, rather than behind the page. */
#app,
.app {
  background: transparent !important;
  isolation: isolate;
  position: relative;
  z-index: 1;
}

@keyframes diplotalk-globe-drift {
  from { background-position: center, 46% 52%; }
  to { background-position: center, 54% 48%; }
}

/* Glass-like diplomatic surfaces; message and composer controls remain native. */
.header,
.left-sidebar,
.right-sidebar,
.app-main .column-left,
.app-main .column-middle,
.app-main .column-right,
.floating_recipient_bar,
.compose_box,
.messagebox,
.message_list,
.message-list,
.topic-list {
  background-color: var(--dt-panel) !important;
  border-color: var(--dt-line) !important;
}

/* The conversation canvas is deliberately lighter than the sidebars, so the
   subtle globe/network field remains visible without reducing legibility. */
.app-main,
.app-main .column-middle,
#message_view,
.message_view,
.message-feed,
.message_feed,
.message-list-viewport,
.message-list,
.message_list,
.message-pane,
.message-view {
  background:
    linear-gradient(90deg, rgba(3, 17, 31, 0.92), rgba(3, 17, 31, 0.48) 52%, rgba(3, 17, 31, 0.86)),
    url("/static/diplotalk/globe-network.jpg") 60% 54% / cover fixed no-repeat !important;
  border-color: var(--dt-line) !important;
}

/* Inbox is a separate Zulip view from the message canvas. Match it to the
   same globe field rather than leaving its default solid-black panel. */
.inbox-container,
.inbox-container #inbox-pane {
  background:
    linear-gradient(90deg, rgba(3, 17, 31, 0.92), rgba(3, 17, 31, 0.48) 52%, rgba(3, 17, 31, 0.86)),
    url("/static/diplotalk/globe-network.jpg") 60% 54% / cover fixed no-repeat !important;
}

/* Channel names stand on their own in the DiploTalk sidebar. */
#left-sidebar .subscription_block .stream-privacy {
  display: none !important;
}

#left-sidebar .subscription_block {
  grid-template-columns:
    var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
    minmax(0, max-content) minmax(0, max-content)
    var(--left-sidebar-vdots-width) 0;
}

/* Use channel names without Zulip's hash/globe/lock identity glyphs. */
.stream-privacy {
  display: none !important;
}

.header,
.left-sidebar,
.right-sidebar,
.compose_box,
.messagebox {
  backdrop-filter: blur(14px);
}

.header,
.left-sidebar,
.right-sidebar {
  box-shadow: 0 1px 0 var(--dt-line);
}

/* Zulip's native header logo; 1.6em is 28% larger than its 1.25em default. */
.header .nav-logo {
  height: 1.6em !important;
  width: auto;
}

.message_row,
.message-list .message_row,
.recipient_row,
.topic-box {
  border-radius: 10px;
}

.message_row:hover,
.message-list .message_row:hover,
.selected_topic,
.active-sub-filter,
.left-sidebar .active {
  background: rgba(23, 55, 84, 0.72) !important;
  box-shadow: inset 3px 0 0 var(--dt-gold);
}

.stream-name,
.topic-name,
.header h1,
.header h2,
.app a:not(.message_content a) {
  color: var(--dt-ink);
}

.unread_count,
.stream-unread-count,
.unread-count,
.mention-badge {
  background: var(--dt-gold) !important;
  color: var(--dt-navy-deep) !important;
}

.compose_box,
.messagebox,
textarea,
[contenteditable="true"] {
  border-color: rgba(201, 164, 74, 0.32) !important;
}

.compose_box:focus-within,
.messagebox:focus-within {
  box-shadow: 0 0 0 1px var(--dt-gold), 0 8px 30px rgba(0, 0, 0, 0.28);
}

button.btn-primary,
.btn-primary,
.send_button,
.send-button {
  background: var(--dt-gold) !important;
  border-color: var(--dt-gold) !important;
  color: var(--dt-navy-deep) !important;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}