/* ==========================================================================
   Grease Ducks – App CSS
   Lean, organized, and brand-consistent
   ========================================================================== */

/* ---------- 1) Brand tokens (edit these in one place) ------------------- */
:root {
  --gd-green-500: #0B6A2B;   /* primary brand green */
  --gd-green-600: #095c24;   /* hover/focus */
  --gd-green-700: #1b5e20;   /* dark header (notifications, etc.) */
  --gd-navy-700:  #0B2E45;   /* gradient start for auth bg */

  --gd-bubble-mine:   #e6f2ff;
  --gd-bubble-theirs: #f3f5f7;
  --gd-text-mine:     #0a2a4a;
  --gd-text-theirs:   #222;
  --gd-border:        #eee;
  --gd-shadow:        0 1px 0 rgba(0,0,0,.04);
}

/* A helper class for dark brand backgrounds (e.g., dropdown header) */
.bg-brand-green { background-color: var(--gd-green-700) !important; }

/* ---------- 2) Auth views ------------------------------------------------ */
.brand-logo { height: 72px; width: auto; }
@media (min-width: 992px) { .brand-logo { height: 84px; } }

.auth-bg {
  background: linear-gradient(135deg, var(--gd-navy-700) 0%, var(--gd-green-500) 100%) !important;
}

/* ---------- 3) Buttons --------------------------------------------------- */
.btn-primary {
  background-color: var(--gd-green-500) !important;
  border-color: var(--gd-green-500) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gd-green-600) !important;
  border-color: var(--gd-green-600) !important;
}

/* ---------- 4) NProgress (top loading bar) ------------------------------ */
#nprogress .bar { background: var(--gd-green-500) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--gd-green-500), 0 0 5px var(--gd-green-500) !important; }
#nprogress .spinner-icon {
  border-top-color: var(--gd-green-500) !important;
  border-left-color: var(--gd-green-500) !important;
}

/* ---------- 5) Links (minor helper) ------------------------------------- */
.back-to-login {
  color: #16a34a; /* green-600-ish */
  font-weight: 600;
  text-decoration: none;
}
.back-to-login:hover { text-decoration: underline; }

/* ---------- 6) Chat bubbles --------------------------------------------- */
/* Legacy alias: if old markup still uses .chat-bubble, keep it styled.
   (Safe to remove once everything uses .gd-bubble) */
.chat-bubble {
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 16px;
  line-height: 1.35;
  box-shadow: var(--gd-shadow);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Chat list + thread */
.gd-msg{display:flex;gap:8px;margin:10px 0}
.gd-msg.mine{justify-content:flex-end}
.gd-msg.theirs{justify-content:flex-start}

.gd-msg .gd-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 28px}
.gd-msg.mine .gd-avatar{display:none}

.gd-bubble{
  max-width:72%;
  padding:10px 12px;
  border-radius:16px;
  line-height:1.35;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  word-break:break-word;
  background:#f3f5f7; color:#222;      /* default (theirs) */
  border-top-left-radius:6px;
}
.gd-msg.mine .gd-bubble{
  background:#e6f2ff; color:#0a2a4a;
  border-top-left-radius:16px; border-top-right-radius:6px;
}

.gd-meta{margin-top:6px;font-size:.78rem;opacity:.65}
.gd-attachment{width:120px;height:90px;object-fit:cover;border-radius:6px;border:1px solid #eee}

.gd-msg.theirs .gd-bubble {
  background: var(--gd-bubble-theirs);
  color: var(--gd-text-theirs);
  border-top-left-radius: 6px;
}

/* Slightly wider bubbles on very large screens */
@media (min-width: 1400px) {
  .gd-bubble, .chat-bubble { max-width: 75%; }
}

/* ---------- 7) Small utilities ----------------------------------------- */
.object-cover { object-fit: cover; }

/* Email composer */
.compose-editor {
  min-height: 140px;   // was effectively huge/auto
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: .75rem;
  background: #fff;
}

.compose-quoted {
  margin-top: .5rem;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background: #fafafa;
}

/* ============================================================
   Wider chat area + bubbles (desktop)
   ============================================================ */

@media (min-width: 1400px) {

  /* let the chat stretch across the whole right column */
  .gd-chat {
    max-width: 100% !important;
  }

  .gd-chat .gd-messages {
    max-width: 100% !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  /* allow each message row to take the full width of gd-messages */
  .gd-chat .gd-msg {
    max-width: 100% !important;
  }

  .gd-chat .gd-msg .gd-bubble {
    max-width: 720px !important;   // tweak 650–800px as you like
  }

}