.sidebar-panel{
  width:100%;display:flex;flex-direction:column;
  overflow:hidden;background:var(--panel);
  border-right:1px solid var(--border);
}

.chats-header-main{
  height:var(--topbar-h);padding:0 16px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;z-index:12;
  justify-content:space-between;
  background:var(--panel-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.chats-header-left,.chats-header-right{display:flex;align-items:center;gap:8px;min-width:0}
.chats-header-left{flex-shrink:0}
.chats-header-right{flex:1;min-width:0;justify-content:flex-end}

.menu-logo-icon{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#005f6d,#0a7c88);
  color:#fff;font-size:13px;font-weight:800;flex-shrink:0;order:1;
  box-shadow:var(--shadow-glow);
}
.menu-logo-text{
  font-size:18px;font-weight:800;white-space:nowrap;
  background:linear-gradient(135deg,#005f6d 0%,#0a7c88 45%,#ff8c42 100%);
  background-size:220% 220%;
  animation:ayaGlow 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  order:2;
}
.header-btn{
  width:36px;height:36px;border:none;
  background:transparent;color:var(--text-secondary);
  font-size:18px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;
  transition:all var(--transition);
}
.header-btn:hover{background:var(--soft);color:var(--brand)}

.search-container{
  height:var(--search-h);padding:4px 12px;
  display:flex;align-items:center;flex-shrink:0;
  background:var(--panel);
}
.search-input{
  width:100%;height:36px;border:none;outline:none;
  background:var(--soft);border-radius:var(--r-sm);
  padding:0 14px;font-size:14px;color:var(--text);
  transition:all var(--transition);
}
.search-input:focus{background:var(--soft-hover);box-shadow:inset 0 0 0 1.5px var(--brand)}

.folders-bar{
  height:var(--folders-h);padding:6px 0;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  background:var(--panel);flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--border);
}
.folders-bar::-webkit-scrollbar{display:none}
.folders-scroll{display:inline-flex;gap:6px;padding:0 12px}
.folder-chip{
  display:inline-flex;align-items:center;gap:5px;
  height:32px;padding:0 14px;border-radius:var(--r-full);
  background:var(--soft);color:var(--text-secondary);
  font-size:13px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;
  transition:all var(--transition);user-select:none;
}
.folder-chip:hover{background:var(--soft-hover);color:var(--text)}
.folder-chip.active{
  background:var(--brand);color:#fff;
  border-color:var(--brand);box-shadow:var(--shadow-glow);
}
.folder-unread{
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.18);
  display:inline-flex;align-items:center;justify-content:center;
}
.folder-chip.active .folder-unread{background:rgba(255,255,255,.28)}

.chats-list-mobile{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--panel);
}
.chat-item-mobile{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;
  transition:background var(--transition);position:relative;
}
.chat-item-mobile::after{
  content:"";position:absolute;
  left:72px;right:14px;bottom:0;height:1px;
  background:var(--border);
}
.chat-item-mobile:last-child::after{display:none}
.chat-item-mobile:hover{background:var(--soft)}
.chat-item-mobile:active{background:var(--soft-hover)}
.chat-item-mobile.has-unanswered{
  background:linear-gradient(135deg,rgba(0,95,109,.12) 0%,rgba(10,124,136,.10) 45%,rgba(255,140,66,.14) 100%);
  background-size:220% 220%;
  animation:ayaGlow 6s ease infinite;
  border-radius:var(--r-md);
}
.chat-item-mobile.has-unanswered::after{background:transparent}

.chat-avatar-mobile{
  width:52px;height:52px;border-radius:var(--r-full);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#005f6d,#0a7c88);color:#fff;
  font-size:20px;font-weight:600;overflow:hidden;box-shadow:var(--shadow-sm);
}
.chat-avatar-mobile img{width:100%;height:100%;object-fit:cover;display:block}
.chat-avatar-mobile .brand-mark{width:100%;height:100%;animation:ayaPulse 4s cubic-bezier(0.4,0,0.2,1) infinite}
.chat-avatar-mobile:has(.brand-mark){background:none;box-shadow:none;overflow:visible}

.chat-info-mobile{flex:1;min-width:0;padding:2px 0}
.chat-name-mobile{
  font-size:15px;font-weight:600;line-height:1.25;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
}
.chat-last-mobile{
  font-size:13px;color:var(--text-secondary);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-meta-mobile{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:6px;flex-shrink:0;margin-left:4px;
}
.chat-time-mobile{font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.chat-unanswered-badge,.unread-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#005f6d,#0a7c88);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-glow);
}

/* DARK */
body.dark-theme .sidebar-panel,
body.dark-theme .chats-header-main,
body.dark-theme .search-container,
body.dark-theme .folders-bar{background:var(--panel);color:var(--text)}
body.dark-theme .chats-header-main{background:var(--panel-glass)}
body.dark-theme .search-input,
body.dark-theme .folder-chip{background:var(--soft);color:var(--text-secondary)}
body.dark-theme .folder-chip.active{background:var(--brand);color:#fff}
body.dark-theme .chat-item-mobile:hover{background:var(--soft)}
body.dark-theme .chat-item-mobile.has-unanswered{
  background:linear-gradient(135deg,rgba(0,95,109,.12) 0%,rgba(10,124,136,.10) 45%,rgba(255,140,66,.14) 100%);
  background-size:220% 220%;
  animation:ayaGlow 6s ease infinite;
  border-radius:var(--r-md);
}

/* ===== MOBILE: bottom bar in flex flow, NOT fixed ===== */
@media(max-width:980px){
  .sidebar-panel{
    height:100vh;height:-webkit-fill-available;border-right:none;
    display:flex;flex-direction:column;
  }
  /* Reorder: search(1) folders(2) chats(3) bottombar(4) */
  .search-container{order:1;flex-shrink:0}
  .folders-bar{order:2;flex-shrink:0}
  .chats-list-mobile{order:3;flex:1;min-height:0;overflow-y:auto}
  .chats-header-main{
    order:4;flex-shrink:0;
    /* NOT fixed — stays in flex flow */
    position:relative;
    height:calc(52px + var(--safe-bottom));
    padding:0 16px var(--safe-bottom);
    border-top:1px solid var(--border);border-bottom:none;
    border-radius:0;z-index:1;
    background:var(--panel-glass);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 -4px 20px rgba(0,0,0,.06);
  }
  body.chat-open .sidebar-panel{display:none !important}
  body:not(.chat-open) .sidebar-panel{display:flex !important}
}

/* ===== DESKTOP ===== */
@media(min-width:981px){
  html,body{height:100vh;height:-webkit-fill-available;overflow:hidden}
  body{
    padding:12px;
    background:
      radial-gradient(ellipse at 15% 50%,rgba(0,95,109,.04) 0%,transparent 50%),
      radial-gradient(ellipse at 85% 30%,rgba(255,140,66,.03) 0%,transparent 40%),
      var(--bg-gradient);
  }
  #app{
    height:calc(100vh - 24px);border-radius:var(--r-xl);
    overflow:hidden;background:var(--panel-glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow-xl),0 0 0 1px var(--border);
  }
  .app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);height:100%}
  .sidebar-panel{width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w)}
  .chats-header-main{position:sticky;top:0;order:unset}
  .search-container{order:unset}
  .folders-bar{order:unset}
  .chats-list-mobile{order:unset}
  .chat-item-mobile{padding:10px 16px}
}

@keyframes ayaGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}