/* CK Chat skin for Zulip, served from /ck-brand/chat/ck-chat.css and injected by Apache (A1821, 4 Nov 2026).
   Teal-led, WhatsApp feel. Palette from ck-tokens: teal #197885, navy #142940, sage #85BCB7,
   stone #DEDED2, off-white #F8F7F1, orange #F05926 (one pop only), pink #E6B6D4.
   Fonts are self-hosted here so Zulip's CSP allows them.

   Light and dark (A1821 item 5): every CK token is a light-dark() pair, so it follows Zulip 12's own theme switch.
   Zulip sets `color-scheme: dark` on :root.dark-theme and, under prefers-color-scheme: dark, on
   :root.color-scheme-automatic (web/styles/dark_theme.css, tag 12.3); light-dark() then resolves to the second value.
   Light values are exactly the first skin's. Dark keeps Zulip's dark surfaces (the second values are Zulip 12.3's own
   dark values) and brings in teal as accents, a lighter teal for text and links so they read on dark.
   Own messages: Zulip 12.3 puts no "mine" class on a message row; the one mark is the edit control, rendered only
   when msg/sent_by_me (web/templates/message_controls.hbs), so the selector is .message_row:has(.edit_content). */

@font-face { font-family: "Figtree"; src: url("/ck-brand/chat/Figtree-Variable-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/ck-brand/chat/JosefinSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root, :root.color-scheme-automatic, :root.light-theme, :root.dark-theme {
  /* fills that carry white text: the same teal in both themes */
  --ck-teal: #197885;
  --ck-teal-dark: light-dark(#135E69, #218C9A);
  /* teal as text, links, icons and focus rings: lighter on dark for contrast */
  --ck-accent: light-dark(#197885, #6CC3CC);
  --ck-header: light-dark(#197885, #10464E);
  --ck-navy: light-dark(#142940, hsl(0deg 0% 87%));
  --ck-muted: light-dark(#6B7A86, hsl(0deg 0% 65%));
  --ck-sage: light-dark(#85BCB7, #1F4F55);
  --ck-stone: light-dark(#DEDED2, hsl(0deg 0% 100% / 8%));
  --ck-off: light-dark(#F8F7F1, hsl(0deg 0% 13%));
  --ck-bg: light-dark(#FBFBF7, hsl(0deg 0% 11%));
  --ck-surface: light-dark(#FFFFFF, hsl(0deg 0% 13.5%));
  --ck-line: light-dark(#E7E8DD, hsl(0deg 0% 100% / 10%));
  --ck-pink: light-dark(#E6B6D4, #5A3550);
  --ck-bubble-own: light-dark(#E3F0EE, #1C3A3E);
  --ck-bubble-own-border: light-dark(#CFE3DF, #24494E);

  --color-background: var(--ck-bg);
  --color-background-navbar: var(--ck-header);
  --color-background-header: var(--ck-header);
  --color-navbar-bottom-border: var(--ck-header);
  --color-background-search: rgba(255,255,255,0.14);
  --color-text-default: var(--ck-navy);
  --color-text-message-default: var(--ck-navy);
  --color-text-sender-name: var(--ck-accent);
  --color-text-message-header: var(--ck-navy);
  --color-background-message-header: var(--ck-off);
  --color-background-private-message-header: light-dark(#DEDED2, hsl(46deg 15% 20%));
  --color-background-private-message-content: var(--ck-surface);
  --color-background-stream-message-content: var(--ck-surface);
  --color-message-content-container-border: var(--ck-line);
  --color-border-sidebar: var(--ck-line);
  --color-background-active-narrow-filter: var(--ck-sage);
  --color-background-hover-narrow-filter: var(--ck-stone);
  --color-text-active-narrow-filter: var(--ck-navy);
  --color-background-unread-counter: var(--ck-teal);
  --color-unread-counter-text: #FFFFFF;
  --color-background-unread-counter-dot: var(--ck-accent);
  --color-text-url: var(--ck-accent);
  --color-text-url-hover: var(--ck-navy);
  --color-background-compose: var(--ck-off);
  --color-compose-send-button-background: var(--ck-teal);
  --color-compose-send-button-background-interactive: var(--ck-teal-dark);
  --color-background-popover: light-dark(#FFFFFF, hsl(0deg 0% 17%));
  --color-background-modal: light-dark(#FFFFFF, hsl(0deg 0% 17%));
  --color-background-widget-input: light-dark(#FFFFFF, hsl(225deg 6% 10%));
  --color-icon-purple: var(--ck-accent);
  --color-background-tab-picker-selected-tab: var(--ck-sage);
  --color-background-tab-picker-tab-option-hover: var(--ck-stone);
  --color-text-dropdown-menu: var(--ck-navy);
  --color-background-dropdown-menu: light-dark(#FFFFFF, hsl(0deg 0% 17%));
  --color-outline-focus: var(--ck-accent);
}

body, .app, textarea, input, button, select, .message_content, #compose-textarea {
  font-family: "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Organisation name in the brand face */
.realm-name, #realm-name, .navbar-item .realm-name {
  font-family: "Josefin Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Top bar: teal (deep teal in dark), white text and icons */
#header, .header, #navbar-fixed-container .header, #navbar_alerts_wrapper {
  background-color: var(--ck-header) !important; color: #FFFFFF; border-bottom: 0;
}
#header a, #header .navbar-item, #header .fa, #header .zulip-icon, #header .realm-name,
#navbar-fixed-container .navbar-item, #navbar-fixed-container .zulip-icon, #navbar-fixed-container .realm-name,
#navbar-fixed-container .navbar-item .fa, #navbar-fixed-container .navbar-item .zulip-icon,
.navbar-item .search_icon, .navbar-item .search_closed, #search_exit, .navbar-item .search-input::placeholder {
  color: #FFFFFF !important; opacity: 1;
}
#searchbox .navbar-search, #searchbox_form, #header .search-input, #header #search_query, .navbar-search.expanded {
  background-color: rgba(255,255,255,0.16) !important; border: 0 !important; border-radius: 10px; color: #FFFFFF !important;
}
#searchbox .navbar-search:focus-within { background-color: var(--ck-surface) !important; color: var(--ck-navy) !important; }
#searchbox .navbar-search:focus-within input, #searchbox .navbar-search:focus-within .fa { color: var(--ck-navy) !important; }

/* Sidebars: off-white (Zulip's dark grey in dark), teal headings, sage active pill, teal unread badges */
#left-sidebar, .column-left .left-sidebar, #stream_filters, #left_sidebar_scroll_container,
#right-sidebar, .column-right .right-sidebar, #right-sidebar-container {
  background-color: var(--ck-off) !important;
}
.left-sidebar-title, #userlist-title, .right-sidebar-title { color: var(--ck-accent); font-weight: 600; letter-spacing: 0.04em; }
.left-sidebar .active-filter, .left-sidebar .active-sub-filter,
#stream_filters li.active-filter, #stream_filters li.active-filter > .bottom_left_row,
#views-label-container .active-filter, .top_left_row.active-filter {
  background-color: var(--ck-sage) !important; color: var(--ck-navy) !important; border-radius: 10px;
}
#stream_filters .narrow-filter:hover > .bottom_left_row, .left-sidebar .narrow-filter:hover, .top_left_row:hover, .topic-list-item:hover {
  background-color: var(--ck-stone) !important; border-radius: 10px;
}
.unread_count, .unread_mention_info, .left-sidebar .unread_count, .top_left_row .unread_count {
  background-color: var(--ck-teal) !important; color: #FFFFFF !important; border-radius: 999px; font-weight: 600;
}
.stream-privacy-modern-color, .stream-privacy { border-radius: 6px; }
.user-presence-circle.user-circle-active, .user_circle_green, .user-circle-active { background-color: var(--ck-accent) !important; border-color: var(--ck-accent) !important; }

/* Message feed: WhatsApp-style bubbles on a soft background */
#message_feed_container, .message-feed, #message-lists-container, .message-list { background-color: var(--ck-bg) !important; }
.recipient_row { margin: 10px 0 2px; }
.message_header, .recipient_row .message_header, .message-header-contents {
  background-color: transparent !important; border: 0 !important; box-shadow: none !important;
}
.message_header .message-header-contents { background-color: var(--ck-off) !important; border-radius: 999px; padding: 2px 12px; display: inline-flex; }
.message_header .stream_label, .message_header .narrows_by_recipient, .message_header .topic-name, .message_header .stream-topic, .stream_label {
  color: var(--ck-navy) !important; font-weight: 600;
}
.message_row { border: 0 !important; background: transparent !important; }
.message_row .messagebox, .message_row .messagebox-content {
  background-color: var(--ck-surface); border-radius: 14px; border: 1px solid var(--ck-line); box-shadow: 0 1px 1px rgba(20,41,64,0.05);
  margin: 2px 12px 4px 6px;
}
.message_row.include-sender .messagebox { border-top-left-radius: 4px; }
/* own messages: sage tint, as WhatsApp greens your side of the chat. Zulip renders .edit_content only for the
   current user's own messages (message_controls.hbs, msg/sent_by_me), so it marks the row. */
.message_row:has(.message_controls .edit_content) .messagebox,
.message_row:has(.message_controls .edit_content) .messagebox-content {
  background-color: var(--ck-bubble-own); border-color: var(--ck-bubble-own-border);
}
.message_row.selected_message .messagebox, .message_row.selected_message .messagebox-content {
  box-shadow: inset 3px 0 0 var(--ck-accent), 0 1px 1px rgba(20,41,64,0.05);
}
.message_row .messagebox:hover { box-shadow: 0 2px 6px rgba(20,41,64,0.08); }
.sender_name, .sender_name a { color: var(--ck-accent) !important; font-weight: 600; }
.message_time { color: var(--ck-muted); font-size: 0.85em; }
.message_content a, a, a:visited { color: var(--ck-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.message_content a:hover, a:hover { color: var(--ck-navy); }
.user-mention, .topic-mention, .user-group-mention { background-color: rgba(133,188,183,0.28); color: var(--ck-navy); border-radius: 6px; padding: 0 4px; }
.user-mention.user-mention-me, .user-mention-me { background-color: var(--ck-pink); color: var(--ck-navy); }
.message_reaction { background-color: var(--ck-off); border: 1px solid var(--ck-stone); border-radius: 999px; color: var(--ck-navy); }
.message_reaction.reacted { background-color: var(--ck-sage); border-color: var(--ck-sage); }
.message_content blockquote { border-left: 3px solid var(--ck-sage); }
.message_content code, .message_content pre { background-color: var(--ck-off); border: 1px solid var(--ck-stone); border-radius: 6px; }
.message_edit_notice, .message_time, .message_controls .fa { color: var(--ck-muted); }
.unread_marker, .unread-marker-fill { background-color: var(--ck-accent) !important; }
.date_row, .date_row .date-direction { color: var(--ck-navy); }
.date_row span { background-color: var(--ck-off); border-radius: 999px; padding: 2px 10px; }

/* Compose: rounded box, teal round send button */
#compose, #compose-content, #compose-container { background-color: var(--ck-off) !important; border-top: 1px solid var(--ck-line) !important; }
#compose-textarea, .compose-textarea, #compose .message-textarea, .compose_box_top_stream_wrapper, #compose_recipient_box {
  background-color: var(--ck-surface) !important; border: 1px solid var(--ck-stone) !important; border-radius: 18px; color: var(--ck-navy);
}
#compose-textarea:focus, .compose-textarea:focus { border-color: var(--ck-accent) !important; box-shadow: 0 0 0 2px rgba(25,120,133,0.18); }
#compose-send-button, .compose-submit-button, #compose .send-button, .compose-send-or-save-button {
  background-color: var(--ck-teal) !important; border-color: var(--ck-teal) !important; color: #FFFFFF !important; border-radius: 999px;
}
#compose-send-button:hover, .compose-submit-button:hover, .compose-send-or-save-button:hover { background-color: var(--ck-teal-dark) !important; border-color: var(--ck-teal-dark) !important; }
.compose_control_button, .compose_control_button i { color: var(--ck-accent); }
#compose .compose_control_button:hover { background-color: rgba(25,120,133,0.1); border-radius: 8px; }
.compose-reply-button-wrapper, #compose_buttons .reply_button, #new_conversation_button, .compose_new_conversation_button {
  border-radius: 999px; border-color: var(--ck-stone);
}
#new_direct_message_button, .compose_new_direct_message_button, #compose_buttons .compose_mobile_button { background-color: var(--ck-teal) !important; color: #FFFFFF !important; border-radius: 999px; }

/* Buttons, popovers, modals, settings */
.button.sea-green, .button.rounded.sea-green, .btn-primary, .dialog_submit_button, .settings-button.sea-green, button.sea-green,
.action-button-primary-brand, .action-button.action-button-primary-brand {
  background-color: var(--ck-teal) !important; border-color: var(--ck-teal) !important; color: #FFFFFF !important;
}
.button.sea-green:hover, .dialog_submit_button:hover, .btn-primary:hover, .action-button-primary-brand:hover { background-color: var(--ck-teal-dark) !important; border-color: var(--ck-teal-dark) !important; }
.popover, .tippy-box, .modal__container, .overlay-content, #settings_overlay_container, #settings_page, .micromodal .modal__container {
  color: var(--ck-navy); border-color: var(--ck-line); border-radius: 14px;
}
#settings_page .sidebar, .settings-sidebar, #settings_overlay_container .sidebar { background-color: var(--ck-off) !important; }
#settings_page .sidebar .active, #settings_overlay_container .sidebar-wrapper .active, .settings-sidebar .active {
  background-color: var(--ck-sage) !important; color: var(--ck-navy) !important; border-radius: 10px;
}
.tab-switcher .ind-tab.selected, .tab-switcher .ind-tab.selected:hover { background-color: var(--ck-teal) !important; color: #FFFFFF !important; }
input[type="checkbox"]:checked + .custom-checkbox, .custom-checkbox:has(input:checked), .toggle.on { background-color: var(--ck-teal) !important; border-color: var(--ck-teal) !important; }

/* Recent conversations and Inbox views */
#recent_view_table thead, #recent_view_table th, .table-striped thead th { background-color: var(--ck-off) !important; color: var(--ck-accent) !important; font-weight: 600; }
#recent_view_table tbody tr:hover, #recent_view_table tr.unread_topic, .inbox-row:hover, .inbox-header:hover { background-color: rgba(133,188,183,0.15) !important; }
.inbox-header { background-color: var(--ck-off); border-radius: 10px; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ck-stone); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ck-sage); }

/* Login and portico pages: CK logo and teal */
.portico-header .brand, .portico-header .brand .brand-logo, .header-main .brand { color: var(--ck-accent); }
.portico-header .brand img, .portico-header .brand svg { display: none; }
.portico-header .brand::before {
  content: ""; display: inline-block; width: 36px; height: 36px; margin-right: 8px; vertical-align: middle;
  background: url("/ck-brand/chat/round-green.png") center / contain no-repeat;
}
.portico-page .new-style .button, .portico-page .register-button, .login-page-container .login-button, #login_form .login-button,
.portico-page input[type="submit"], .new-style .button.register-button, .register-form .button {
  background-color: var(--ck-teal) !important; border-color: var(--ck-teal) !important; color: #FFFFFF !important; border-radius: 999px;
}
.portico-page input[type="text"]:focus, .portico-page input[type="email"]:focus, .portico-page input[type="password"]:focus { border-color: var(--ck-accent) !important; }
body.portico, .portico-page, .portico-container { background-color: var(--ck-bg); }

/* Zulip wordmark in the app, where it survives, takes the sage */
.zulip-icon.zulip-icon-zulip-logo, .zulip-logo { color: #85BCB7 !important; }