/* Chats-only quiet recessed surface.
   Preserve exact AI identity strip and its multi-AI gradient from
   qura-top-fade.css (.ai-chat-item::before); never dim the whole row. */
/* Inactive chat: NO AI-colour or glow inside the button.
   The AI identity edge is rendered separately by ::before and kept intact. */
#drawer #drawerContent .drawer-chat-entry > a.ai-chat-item:not(.active){
 background:var(--surface-2,#122033)!important;
 box-shadow:inset 0 0 0 1px var(--hairline,#1C2B3D)!important;
 color:#cbd6e2;
}
/* Only real mouse pointers may hover. Android touch WebView can keep :hover
   latched on a previously tapped chat and make its glow look active. */
@media (hover:hover) and (pointer:fine){
 #drawer #drawerContent .drawer-chat-entry > a.ai-chat-item:not(.active):hover{
  background:var(--surface-2,#122033)!important;
  box-shadow:inset 0 0 0 1px var(--hairline,#1C2B3D)!important;
 }
}
/* Selected chat: the inner light and the engraved chat icon use the
   SAME AI colour from --chat-edge. Other chats stay neutral. */
#drawer #drawerContent .drawer-chat-entry > a.ai-chat-item.active{
 background:
   radial-gradient(ellipse 84% 110% at 18% 50%,
     color-mix(in srgb,var(--chat-edge,#8d67ff) 7%,transparent) 0%,
     transparent 82%),
   linear-gradient(116deg,
     color-mix(in srgb,var(--chat-edge,#8d67ff) 12%,#1b2937) 0%,
     #152330 100%)!important;
 box-shadow:inset 0 1px 1px #d0e0ea24,
   inset 0 2px 4px #0006,
   inset 0 0 10px color-mix(in srgb,var(--chat-edge,#8d67ff) 6%,transparent)!important;
 color:#f1f5fa;
}
/* Keep the SVG recessed, but make its glimmer match that exact AI colour. */
#drawer #drawerContent .drawer-chat-entry > a.ai-chat-item.active .nav-icon.qore-chat-icon svg{
 fill:color-mix(in srgb,var(--chat-edge,#8d67ff) 25%,#091725);
 filter:
   drop-shadow(-.8px -.8px .45px #000e)
   drop-shadow(1px 1px .65px color-mix(in srgb,var(--chat-edge,#8d67ff) 90%,#ecf2ff))
   drop-shadow(0 0 2.5px color-mix(in srgb,var(--chat-edge,#8d67ff) 65%,transparent));
}
/* Leave card geometry, chat overflow menu, SVG icons, runtime dots,
   --chat-edge-gradient and all coloured ::before edges untouched. */


/* Same AI-edge opacity levels as the copper edge on Menu:
   idle 55%, active 100%. Keep individual AI colours and group gradients. */
#drawer #drawerContent .drawer-chat-entry > a.ai-chat-item:not(.active)::before{
 opacity:.55!important;
}
#drawer #drawerContent .drawer-chat-entry > a.ai-chat-item.active::before{
 opacity:1!important;
}

/* Chat drawer rows = same 40px card as Menu. Keep all chat
   identity-coloured borders, selected glow, badges and existing menu untouched. */
#drawer #drawerContent .drawer-chat-entry > a.nav-item{
 height:40px!important;
 min-height:40px!important;
 max-height:40px!important;
 box-sizing:border-box;
 padding-top:5px!important;
 padding-bottom:5px!important;
 align-items:center;
}
#drawer #drawerContent .drawer-chat-entry > a.nav-item .nav-copy{
 display:flex;
 flex-direction:column;
 align-items:stretch;
 justify-content:center;
 gap:1px;
 min-width:0;
 overflow:hidden;
 white-space:nowrap;
}
#drawer #drawerContent .drawer-chat-entry > a.nav-item .nav-copy > span:first-child{
 flex:0 0 auto;
 width:100%;
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:13.5px;
 line-height:16px;
}
#drawer #drawerContent .drawer-chat-entry > a.nav-item .nav-meta{
 display:block;
 flex:0 0 auto;
 width:100%;
 min-width:0;
 max-width:100%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:9px;
 line-height:10px;
}
/* Same metadata font sizes as Featherless/provider + date above messages. */
@media(max-width:700px){
 #drawer #drawerContent .drawer-chat-entry > a.nav-item .nav-meta{
  font-size:8.5px;
  line-height:9px;
 }
}
/* No coloured AI dots: that information is already on the card's edge. */
#drawer #drawerContent .drawer-chat-entry .nav-meta .nav-ai i{
 display:none!important;
}