/* DAROO_CHAT_POPUP_PROFESSIONAL_V1
   Reskins Frappe's own built-in Chat popup (.chat-app / .chat-element,
   real class names confirmed live - this is framework-bundled markup,
   not custom Daroo HTML) to match the rest of the system's design
   language: Inter font (already global), the brand teal/green accent,
   12px/10px row-text scale, no bold anywhere, rounded cards, and the
   same subtle hover tint used throughout the Home dashboard's panels. */

.chat-element {
  border-radius: 12px !important;
  border: 1px solid var(--dui-border, #e2e8f0) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05) !important;
  overflow: hidden;
  font-family: InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.chat-list-header {
  height: 54px !important;
  padding: 0 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--dui-border, #e2e8f0);
  background: var(--dui-card, #fff);
}

/* Same solid dark-green banner as the guest welcome screen
   (.chat-welcome-header below) - the logged-in room list previously used
   a much paler tint here, which read as inconsistent against the bold
   guest-side header once that was built. Both now share one identity. */
.chat-list-header {
  height: auto !important;
  min-height: 78px;
  padding: 14px 14px !important;
  background: #006666 !important;
}

.chat-list-header h3 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

/* Icons sitting inside the now-dark-green header need to flip to white -
   .add-room is already its own brand-icon image (unaffected), but
   .user-settings and the popup's own close button use Frappe's default
   icon coloring, which is dark and would vanish against the new banner. */
.chat-list-icons .user-settings,
.chat-cross-button {
  color: #fff !important;
}

.chat-list-icons .user-settings svg,
.chat-list-icons .user-settings svg use,
.chat-cross-button svg,
.chat-cross-button svg use {
  fill: #fff !important;
  color: #fff !important;
}

.chat-list-icons .user-settings:hover,
.chat-cross-button:hover {
  background: rgba(255, 255, 255, .15) !important;
}

/* Injected friendly greeting (see brandChatHeader() in
   daroo_dui_clean_home_shell_v1.js) - replaces the plain "Chats" label
   with a proper welcome banner, matching modern messenger launchers. */
.daroo-dui-chat-welcome-sub-v1 {
  padding: 4px 14px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--dui-border, #e2e8f0);
  background: #006666;
  /* Was max-width:88%, which confined the green background to less than
     the full row and left the panel's white background exposed as a bare
     strip on the right edge - box-sizing:border-box keeps the text itself
     comfortably inset via padding alone, no separate width cap needed. */
  width: 100%;
  box-sizing: border-box;
}

/* Brand icon (Saudi national dress) replaces the default "Create Private
   Room" two-person glyph at the header's top-right, per request - sized
   up from the icon-row default so the artwork stays crisp and readable. */
.chat-list-icons .add-room svg {
  display: none !important;
}

.chat-list-icons .add-room {
  position: relative;
  width: 64px !important;
  height: 64px !important;
}

.chat-list-icons .add-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/grc_tool/images/daroo_chat_bubble_national_icon_v1.svg?v=d499cbe5fa55") no-repeat center / contain;
}

/* Reassurance footer note under the message input (see brandChatFooter()
   in daroo_dui_clean_home_shell_v1.js) - gives the input bar real
   breathing room instead of sitting flush against the popup's bottom
   edge, and fills that space with an actual professional message. */
.daroo-dui-chat-footer-note-v1 {
  width: 100%;
  padding: 8px 2px 0;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--dui-muted, #64748b);
  text-align: center;
  border-top: 1px solid var(--dui-border, #f1f5f4);
}

.daroo-dui-chat-footer-note-v1::before {
  content: "\1F512";
  margin-right: 4px;
  font-size: 9px;
  opacity: .7;
}

.chat-list-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-list-icons .add-room,
.chat-list-icons .user-settings,
.chat-cross-button {
  border-radius: 8px;
  transition: background-color .12s ease;
}

.chat-list-icons .add-room:hover,
.chat-list-icons .user-settings:hover,
.chat-cross-button:hover {
  background: rgba(0, 102, 102, .10);
}

.chat-search {
  padding: 10px 14px !important;
}

.chat-search-box {
  background: var(--daroo-gray-100, #f3f4f6) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  height: 34px !important;
  box-shadow: none !important;
}

.chat-search-box:focus {
  border-color: #006666 !important;
  background: #fff !important;
}

.chat-rooms-container {
  padding: 4px 8px !important;
  max-height: 340px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--dui-border, #d6dde1) transparent;
}

/* Only the first 5 rooms show by default - anything past that is reached
   via the search box instead of scrolling (see wireChatLimit5() in
   daroo_dui_clean_home_shell_v1.js, which toggles this class off while
   the search box has text). Deliberately CSS display:none rather than
   JS .remove() - the native chat_list.js's own search filter toggles
   each room's visibility via jQuery .show()/.hide() (inline style, no
   !important), and this class is removed before that runs, so there is
   never a case of two scripts fighting over the same element - only one
   of them is ever actually controlling visibility at a time. */
.chat-rooms-container.daroo-chat-limit-5 .chat-room:nth-of-type(n+6) {
  display: none !important;
}

.chat-rooms-container::-webkit-scrollbar {
  width: 6px;
}

.chat-rooms-container::-webkit-scrollbar-thumb {
  background-color: var(--dui-border, #d6dde1);
  border-radius: 6px;
}

.chat-room {
  padding: 10px 6px !important;
  border-radius: 8px;
  border-bottom: 0 !important;
  cursor: pointer;
  transition: background-color .12s ease;
}

.chat-room:hover {
  background: rgba(0, 102, 102, .06) !important;
}

/* Frappe's own avatar system assigns a random color per user (purple,
   blue, orange, ...) via inline style="background-color: var(--x-avatar-
   bg)" - inline styles beat any external rule without !important, and the
   randomized palette read as inconsistent against the single teal accent
   used for every other avatar in this app (Tasks, System Activity). One
   consistent color here matches that established convention instead. */
.chat-room .avatar-frame {
  background-color: rgba(0, 102, 102, .18) !important;
  color: #006666 !important;
  font-weight: 500 !important;
}

/* Room rows are a flex layout (avatar / name+preview / date) - long
   titles or previews used to wrap onto a second line and push rows to
   uneven heights, reading as misaligned. Single-line + ellipsis keeps
   every row the same height and each chat identifiable at a glance. */
.chat-profile-info {
  flex: 1 1 auto;
}

.chat-name {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--dui-text, #0f172a) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.last-message {
  font-size: 10.5px !important;
  color: var(--dui-muted, #64748b) !important;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-date {
  font-size: 10px !important;
  color: var(--dui-muted, #64748b) !important;
  flex-shrink: 0;
  white-space: nowrap;
}

/* The floating toggle bubble (visible when the popup itself is closed) -
   same brand teal as every other circular icon-button in this app rather
   than Frappe's default blue. Colored on the INNER .chat-bubble pill, not
   the outer #chat-bubble wrapper - the wrapper has border-radius:0 while
   the inner pill has 999px at the exact same size, so painting the
   wrapper left its square corners visible behind the rounded pill (the
   "wrong edges" bug). */
#chat-bubble .chat-bubble {
  background: #006666 !important;
  box-shadow: 0 4px 12px rgba(0, 102, 102, .35) !important;
}

/* Explicitly left as Frappe's default "Chat With Us" glyph per request -
   the floating bubble itself is never touched here. Only the corner
   radius on the "Talk With Us" / #start-conversation button is fixed
   below (Bootstrap's small default radius reads as "wrong edges" against
   every other fully-rounded button in this app) - no color/background
   touched on that specific button. */
.chat-welcome-footer #start-conversation {
  border-radius: 20px !important;
}

/* ---------------------------------------------------------------------
   Guest pre-chat greeting screen (.chat-welcome, chat_welcome_screen.js) -
   shown before "Start Here" is clicked. */

/* Pre-existing badge (source not in any tracked file - injected by
   something outside this app) sitting at the top of the header; replaced
   with the brand icon in the same slot per request. Hidden via pure CSS
   (display:none, no DOM removal) deliberately - an earlier JS-based
   .remove() approach fought whatever re-adds this element in an infinite
   mutation loop and hung the page. display:none cannot trigger that: the
   node stays in the DOM (any "is it still there" check the other script
   might do still finds it), only paint is suppressed, so there is nothing
   for another script to react to and no loop is possible. The selector
   below matches the exact one styling it (2 classes/attrs of specificity)
   plus two extra ancestor terms so it wins even if that rule's own inline
   <style> tag loads after this file. */
html body [data-linkin-chat-root="1"] .linkin-grc-badge,
html body .linkin-grc-badge {
  display: none !important;
}

.chat-welcome-header .hero-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto !important;
  background: url("/assets/grc_tool/images/daroo_chat_bubble_national_icon_v1.svg?v=d499cbe5fa55") no-repeat center / contain !important;
}

.chat-welcome-header .hero-icon svg {
  display: none !important;
}

.chat-welcome-header {
  padding: 26px 24px 20px;
  text-align: center;
  background: #006666;
}

.chat-welcome-header h3 {
  margin: 10px 0 6px;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.chat-welcome-header p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

.chat-welcome-footer {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.chat-welcome-footer .status-content {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dui-text, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-welcome-footer .status-content::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

.chat-welcome-footer .hero-content {
  margin: 0 0 18px;
  font-size: 11px;
  color: var(--dui-muted, #64748b);
}

.chat-welcome-footer #start-conversation {
  width: 100%;
  max-width: 220px;
  height: 42px;
  border: none;
  background: #006666 !important;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 102, 102, .35);
  transition: background-color .12s ease;
}

.chat-welcome-footer #start-conversation:hover {
  filter: brightness(.85);
}

.chat-welcome-footer .welcome-footer {
  margin-top: auto;
  padding-top: 16px;
  font-size: 10px;
  color: var(--dui-muted, #94a3b8);
  opacity: .75;
}

/* ---------------------------------------------------------------------
   Conversation view (.chat-space) - opened after clicking a room. Real
   DOM confirmed live: .chat-header (back button, avatar, name/status),
   .chat-space-container (scrollable message list), .chat-space-actions
   (bottom input bar + send button). Same tokens as the room list above. */

/* Same solid dark-green identity as .chat-list-header and the guest
   welcome screen - the conversation header stayed plain white before,
   which broke the through-line the moment a user actually opened a
   thread. .avatar-frame/.chat-back-button below flip to light-on-dark to
   match (they were tuned for a white header originally). */
/* min-height/auto (not a fixed 54px) so this matches .chat-list-header's
   own 78px - the conversation header used to shrink back down to the old
   small size the moment a room opened, undoing the "always the same
   large size" the room-list screen already had. justify-content:center
   groups the avatar+name together in the middle (the back-button is
   pulled out of this flex flow via position:absolute below, so it stays
   pinned at the true left edge instead of being centered along with them -
   otherwise centering the row would drag the back arrow away from the
   corner it's expected to sit in). */
/* .chat-space (this header's parent) has no native display:flex of its
   own - chat.bundle.css gives .chat-header/.chat-space-container/
   .chat-space-actions each a hardcoded pixel height instead, sized to
   add up to .chat-element's own fixed 582px total exactly (54 + 475.5 +
   the rest). Growing .chat-header to fit the bigger brand icon without
   also touching those two other fixed numbers pushed the real total
   past 582px, and .chat-element's overflow:hidden (needed elsewhere for
   the rounded corners) clipped the overflow instead of showing it -
   confirmed live as "message box moved below, hard to write, footer
   never appears" (the footer note and the input bar were both still
   really there, just below the visible/clipped edge). Converting
   .chat-space to a flex column here - header and the input bar keep
   their own natural (flex:none) height, and only the message list
   stretches/shrinks to fill whatever's left - makes the layout self-
   balancing for any header height from now on, instead of hand-tuning
   pixel budgets again for every future change. */
/* .chat-space's own height:100% (native and here) only resolves to a real
   pixel value if ITS parent, .chat-container, has an explicit (non-auto)
   height - CSS percentage heights fall back to auto against an auto-height
   parent. The native chat.bundle.css never gives .chat-container a height
   (just "padding:0;margin:0"), because the native design doesn't need one:
   .chat-list's own pieces use hardcoded pixel heights instead of
   percentages, so they never depended on this. .chat-space does depend on
   it, though - without this, .chat-space's flex-column budget above is
   never actually capped at .chat-element's real 582px, so it just grows
   with every new message instead of the message list scrolling internally,
   and the growth gets silently clipped by .chat-element's overflow:hidden.
   Confirmed live: chat-space-container grew from ~349px to ~526px across
   3 sent messages with this rule missing, pushing the input bar and
   footer note below the visible/clipped edge each time. */
.chat-container {
  height: 100% !important;
}

.chat-space {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.chat-header {
  position: relative;
  min-height: 78px;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 14px 74px 14px 54px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #006666 !important;
}

/* The native chat.bundle.css gives .chat-profile-info its own
   margin-right:auto (meant for its own default left-aligned, non-centered
   layout). An auto margin on a flex item consumes all remaining free
   space on that side and overrides justify-content entirely for that
   item - so with justify-content:center added above, the avatar+name
   group was still rendering hard up against the left edge of the header's
   content box instead of centered, with the "centering" gap silently
   swallowed as invisible auto margin after it rather than shown as
   deliberate space before the brand icon. Neutralizing it here is what
   actually lets justify-content:center take effect. */
.chat-header .chat-profile-info {
  margin-right: 0 !important;
}

/* Same brand icon as the room-list header's top-right slot, kept present
   here too so it shows consistently while an actual conversation is open,
   not just on the room list. Sized up to match the room list's own 64px
   icon - "the same large size... even while chatting" per request.

   --daroo-header-brand-icon is set by applyDarooGenderAvatars() in
   daroo_dui_clean_home_shell_v1.js once it resolves the open
   conversation's counterpart gender, so this decorative icon matches the
   same gender-matched Saudi character shown on the small avatar right
   next to it - showing the male icon here for a woman's conversation
   read as a real inconsistency once the avatar itself started matching. */
.chat-header::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-image: var(--daroo-header-brand-icon, url("/assets/grc_tool/images/daroo_chat_bubble_national_icon_v1.svg?v=d499cbe5fa55"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.chat-back-button {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: background-color .12s ease;
  flex-shrink: 0;
  color: #fff !important;
}

.chat-back-button:hover {
  background: rgba(255, 255, 255, .15) !important;
}

/* Light-on-dark instead of the room list's dark-on-light avatar treatment
   - same one-consistent-brand-color rationale, inverted to stay visible
   against the header's now-solid dark green. */
.chat-header .avatar-frame {
  background-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

.chat-profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.chat-profile-name {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-circle {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5);
}

.chat-profile-status {
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, .78) !important;
  margin-top: 1px;
}

.chat-space-container {
  /* flex:1 (not the native fixed 475.5px) + min-height:0 is what actually
     lets this shrink below its content size instead of forcing the
     header/input bar out of the visible box - a flex item's default
     min-height is auto (= its content size), which alone would still
     blow out .chat-element's fixed height exactly as the fixed pixel
     value did. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  background: var(--daroo-gray-50, #f8fafc);
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--dui-border, #d6dde1) transparent;
}

.chat-space-container::-webkit-scrollbar {
  width: 6px;
}

.chat-space-container::-webkit-scrollbar-thumb {
  background-color: var(--dui-border, #d6dde1);
  border-radius: 6px;
}

.date-line {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 6px 0 14px;
}

.date-line > span {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--dui-muted, #64748b) !important;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  background: var(--daroo-gray-50, #f8fafc);
}

.date-line {
  border-top: 1px solid var(--dui-border, #e2e8f0);
}

.date-line > span {
  transform: translateY(-9px);
}

.sender-message,
.recipient-message {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  max-width: 100%;
}

.sender-message {
  align-items: flex-start;
}

.recipient-message {
  align-items: flex-end;
}

.message-bubble {
  max-width: 78%;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.sender-message .message-bubble {
  background: #006666 !important;
  color: #fff !important;
  border-bottom-left-radius: 4px !important;
}

.sender-message .message-name {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .85) !important;
  margin-bottom: 2px;
}

.recipient-message .message-bubble {
  background: #fff !important;
  color: var(--dui-text, #0f172a) !important;
  border: 1px solid var(--dui-border, #e2e8f0) !important;
  border-bottom-right-radius: 4px !important;
}

.message-time {
  font-size: 10px !important;
  color: var(--dui-muted, #64748b) !important;
  margin-top: 3px;
}

/* Kept a light neutral surface (not dark green) - this is the active
   typing zone, and text inputs read better with a light background for
   contrast/legibility, but the top border picks up the brand color so it
   still visually anchors to the header instead of floating disconnected. */
.chat-space-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px !important;
  border-top: 2px solid #006666;
  background: var(--daroo-gray-50, #f8fafc);
}

.open-attach-items {
  flex-shrink: 0;
  border-radius: 8px;
  padding: 5px;
  color: var(--dui-muted, #64748b);
  cursor: pointer;
  transition: background-color .12s ease;
}

.open-attach-items:hover {
  background: rgba(0, 102, 102, .10);
  color: #006666;
}

.chat-space-actions .type-message {
  flex: 1;
  background: var(--daroo-gray-100, #f3f4f6) !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.chat-space-actions .type-message:focus {
  border-color: #006666 !important;
  background: #fff !important;
}

.message-send-button {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #006666 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 102, 102, .35);
  transition: filter .12s ease, transform .12s ease;
}

.message-send-button:hover {
  filter: brightness(.85);
  transform: scale(1.06);
}

.message-send-button:active {
  transform: scale(.96);
}

.message-send-button svg {
  width: 15px;
  height: 15px;
  fill: #fff !important;
  color: #fff !important;
}