/* D1 Sales Floor -- chat, closer to Slack (v694)
 *
 * Logan, Oct 21 (side by side with Slack's #scoreboard): "Can we make ours
 * look more like slack? Just think it looks more professional overall".
 * Loaded after chat-modern.css. Phone only, scoped to #view-chat.
 *   - Lato for the chat (Slack's face), normal-weight message text
 *   - rounded-square avatars, photo or initials, all the same size
 *   - day breaks: bold date on the left under a full-width line
 *   - reactions sit left under the message, for your own posts too
 *   - sold posts: a flat Slack-style post with a D1 teal bar, not a big box
 *   - composer: one rounded field; send stays grey until you type
 */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

@media (max-width: 899px) {
  #view-chat.room .msgs,
  #view-chat.room .composer,
  #view-chat.room .chan-row {
    font-family: Lato, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  }

  /* header: plain, like a Slack channel header */
  #view-chat.room .chan-cur { font-size: 18px !important; font-weight: 900 !important; letter-spacing: -.1px; }
  #view-chat.room .chan-back,
  #view-chat.room .chan-row #searchOpen,
  #view-chat.room .chan-photo-btn {
    background: transparent !important;
    border: 1px solid var(--cm-line) !important;
    border-radius: 20px !important;
  }
  #view-chat.room .chan-pic { border-radius: 8px !important; }

  /* messages */
  #view-chat .msgs { padding: 4px 16px 96px !important; }
  #view-chat .msg, #view-chat .msg.mine { gap: 10px !important; margin: 0 0 16px !important; }
  #view-chat .msg.grouped { margin-top: -12px !important; }
  #view-chat .msg .avatar.tiny,
  #view-chat .msg.mine .avatar.tiny {
    width: 38px !important; height: 38px !important; min-width: 38px;
    border-radius: 8px !important;
    overflow: hidden;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important; font-weight: 900 !important;
  }
  #view-chat .msg .avatar.tiny img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
  #view-chat .msg-head b {
    font-family: Lato, sans-serif !important;
    font-size: 16px !important; font-weight: 900 !important;
  }
  #view-chat .msg-head span { font-size: 12.5px !important; font-weight: 400 !important; }
  #view-chat .bubble, #view-chat .msg.mine .bubble {
    font-family: Lato, sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  /* day breaks: "Oct 14th" bold on the left, a line across the top */
  #view-chat .day-sep {
    display: block !important;
    text-align: left !important;
    border-top: 1px solid var(--cm-line) !important;
    margin: 4px -16px 14px !important;
    padding: 12px 16px 0 !important;
    background: transparent !important;
  }
  #view-chat .day-sep::before, #view-chat .day-sep::after { display: none !important; }
  #view-chat .day-sep span, #view-chat .day-sep {
    font-family: Lato, sans-serif !important;
    font-size: 16px !important; font-weight: 900 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--cm-text) !important;
  }
  #view-chat .day-sep span { background: transparent !important; padding: 0 !important; border: 0 !important; }

  /* reactions: left, under the text, same for your own posts */
  #view-chat .rx, #view-chat .msg.mine .rx {
    display: flex !important; flex-wrap: wrap;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
    gap: 6px !important;
  }
  #view-chat .rx button, #view-chat .rx .rx-pill {
    height: 30px !important; padding: 0 10px !important;
    border-radius: 15px !important;
    background: var(--cm-soft) !important;
    border: 1px solid transparent !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
  }
  #view-chat .rx button.mine, #view-chat .rx .rx-pill.mine {
    background: #e8f5fa !important;
    border-color: #1d9bd1 !important;
    color: #1264a3 !important;
  }
  html[data-theme="dark"] #view-chat .rx button.mine,
  html[data-theme="dark"] #view-chat .rx .rx-pill.mine {
    background: rgba(29, 155, 209, .18) !important; color: #7cc7ec !important;
  }

  /* sold posts: a flat post with a D1 teal bar on the left, like a Slack app message
     (Logan: "instead of the yellow use our brand color") */
  #view-chat .win {
    background: transparent !important;
    border: 0 !important;
    border-left: 4px solid #00b3bb !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 12px !important;
    margin: 2px 0 16px !important;
    grid-template-columns: 34px 1fr;
    column-gap: 10px;
  }
  #view-chat .win-burst {
    width: 34px !important; height: 34px !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    background: var(--cm-accent-soft) !important;
  }
  #view-chat .win-line { font-family: Lato, sans-serif !important; font-size: 16px !important; line-height: 1.4 !important; }
  #view-chat .win-line b { color: var(--cm-text) !important; font-weight: 900 !important; }
  #view-chat .win-time { font-size: 12.5px !important; }
  html[data-theme="dark"] #view-chat .win { background: transparent !important; }
  html[data-theme="dark"] #view-chat .win-burst { background: rgba(10, 166, 173, .18) !important; }
  html[data-theme="dark"] #view-chat .win-line b { color: var(--cm-text) !important; }
  #view-chat .win + .rx { padding-left: 16px !important; margin: -8px 0 16px !important; }

  /* composer: one rounded field, send grey until there's something to send */
  #view-chat .composer { padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) !important; }
  #view-chat .composer .comp-field {
    background: var(--cm-card) !important;
    border: 1px solid #d6dbe1 !important;
    border-radius: 24px !important;
    min-height: 48px;
  }
  html[data-theme="dark"] #view-chat .composer .comp-field { border-color: var(--cm-line) !important; }
  #view-chat .composer .attach { border-radius: 20px !important; }
  #view-chat .composer #chatAttach { background: var(--cm-soft) !important; }
  #view-chat .composer textarea, #view-chat .composer input[type="text"] {
    font-family: Lato, sans-serif !important; font-size: 16px !important;
  }
  #view-chat .composer .send {
    width: 40px !important; height: 40px !important; min-width: 40px;
    border-radius: 20px !important;
    transition: background-color .15s, color .15s;
  }
  #view-chat .composer:has(textarea:placeholder-shown) .send:not(.recording),
  #view-chat .composer:has(input[type="text"]:placeholder-shown) .send:not(.recording) {
    background: var(--cm-soft) !important;
    color: var(--cm-muted) !important;
  }
}