/* Chat-environment visual polish: bubble depth, composer depth, form-field depth.
   Colors reference theme-colors.css's --theme-primary so the active color theme (Settings >
   تم رنگی) drives the whole chat surface, not just buttons. */

/* Message bubbles: a touch more depth than a flat drop-shadow, and a subtle gradient on
   outgoing bubbles so the chat surface doesn't read as flat white/mint rectangles. */
html body .bubble{
  box-shadow:0 1px 1px #2d4f4715,0 2px 6px #2d4f4720!important;
}
html body .mine .bubble{
  background:linear-gradient(165deg,color-mix(in srgb,var(--theme-primary) 20%,white),color-mix(in srgb,var(--theme-primary) 32%,white))!important;
}

/* Composer input: subtle inset depth + a visible theme-colored ring on focus instead of the
   default browser outline, reused for every panel's inputs/selects. */
html body .input-wrap{
  box-shadow:0 1px 3px #16352e12 inset,0 1px 0 #fff!important;
  transition:box-shadow .15s ease,border-color .15s ease!important;
}
html body .input-wrap:focus-within{
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-primary) 22%,transparent),0 1px 3px #16352e12 inset!important;
}
html body .profile-panel input:focus,html body .profile-panel textarea:focus,
html body .privacy-panel select:focus,html body .registration-panel textarea:focus,
html body .registration-panel select:focus,html body .privacy-panel input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-primary) 22%,transparent)!important;
  border-color:var(--theme-primary)!important;
}

/* Chat list row: a touch of depth on the active/selected row so it reads as "raised" rather
   than just a flat color swap. */
html body .conversation.active{
  box-shadow:0 1px 3px #16352e14!important;
}

/* Avatars: a soft ring + shadow instead of a flat gradient circle, for a slightly premium feel,
   and a theme-colored gradient for letter-avatars (no uploaded photo) instead of fixed teal. */
html body .circle,html body .head-avatar,html body .profile-avatar,html body .person-avatar{
  background:linear-gradient(145deg,color-mix(in srgb,var(--theme-primary) 70%,white),var(--theme-primary))!important;
  box-shadow:0 2px 5px color-mix(in srgb,var(--theme-primary-dark) 33%,transparent),0 0 0 2px #ffffffb0 inset!important;
  overflow:hidden;
  position:relative;
}
/* The letter is a normal grid-centered child; the photo is an absolutely-positioned overlay on
   top of it (grid auto-placement puts sibling elements in separate implicit rows, so without
   this the letter and photo would stack instead of overlapping — and a failed/still-loading
   photo would leave the circle blank instead of showing the letter underneath). */
html body .circle img,html body .head-avatar img,html body .person-avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
}