/* Runa Chat — Telegram-inspired desktop shell, using original Runa styling. */
.sidebar {
  position: relative;
  overflow: hidden;
}

.sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px 8px;
  background: var(--bg-panel);
  flex: 0 0 auto;
}

.sidebar-menu-button,
.sidebar-self,
.quick-compose-button,
.sidebar-popover button,
.quick-compose-menu button {
  border: 0;
  font: inherit;
}

.sidebar-menu-button,
.sidebar-self {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 50%;
  color: #475569;
  background: transparent;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.sidebar-menu-button:hover,
.sidebar-self:hover { background: #F1F5F9; color: #0F172A; }
.sidebar-menu-button .runa-icon { width: 21px; height: 21px; }
.sidebar-self { padding: 1px; }
.sidebar-self .avatar { width: 36px; height: 36px; }

.sidebar-search {
  height: 42px;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 22px;
  background: #F1F3F6;
}

.sidebar-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 19px;
  height: 19px;
  color: #98A2B3;
  transform: translateY(-50%);
  pointer-events: none;
}

.sidebar-search .search-input {
  width: 100%;
  height: 42px;
  padding: 0 15px 0 43px;
  border: 0;
  border-radius: inherit;
  color: #172033;
  background: transparent;
  box-shadow: none;
}

.sidebar-search .search-input:focus {
  background: #FFF;
  border: 1px solid #9CC8EE;
  box-shadow: 0 0 0 3px rgba(53, 153, 219, .10);
}

.sidebar-search .search-input::placeholder { color: #98A2B3; }

.sidebar-popover,
.quick-compose-menu {
  position: absolute;
  z-index: 30;
  min-width: 210px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  backdrop-filter: blur(18px);
}

.sidebar-popover { top: 58px; left: 14px; }
.quick-compose-menu { right: 16px; bottom: 76px; }

.sidebar-popover button,
.quick-compose-menu button {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  color: #162033;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.sidebar-popover button:hover,
.quick-compose-menu button:hover { background: #F1F5F9; }
.sidebar-popover .runa-icon,
.quick-compose-menu .runa-icon { width: 19px; height: 19px; color: #526276; }
.sidebar-popover .sidebar-menu-danger { color: #DC2626; }
.sidebar-popover .sidebar-menu-danger .runa-icon { color: currentColor; }

.sidebar > .filter-tabs {
  gap: 3px;
  margin: 0 12px 7px;
  padding: 4px !important;
  min-height: 46px;
  align-items: center;
  border-radius: 21px;
  background: #FFF;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .09);
  scrollbar-width: none;
}

.sidebar > .filter-tabs::-webkit-scrollbar { display: none; }

.sidebar > .filter-tabs .filter-tab {
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: 18px;
  color: #4B5563;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.sidebar > .filter-tabs .filter-tab:hover { color: #2378B8; background: #F3F8FC; }
.sidebar > .filter-tabs .filter-tab.active {
  color: #2788CF;
  border: 0;
  background: #E8F3FC;
  box-shadow: none;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 10px;
  color: #FFF;
  background: #AEB8C3;
  font-size: 11px;
  line-height: 1;
}

.sidebar > .filter-tabs .filter-tab.active .filter-count { background: #8EA2B5; }
.chat-list { padding: 2px 8px 84px; }

.chat-item {
  min-height: 68px;
  margin: 0;
  padding: 7px 8px;
  gap: 10px;
  border: 0;
  border-radius: 12px;
}

.chat-item:hover { background: #F3F6F9; }
.chat-item.active {
  border: 0;
  background: #E7F3FC;
}

.chat-item .avatar { width: 52px; height: 52px; font-size: 18px; }
.chat-item-name { color: #111827; font-size: 15px; font-weight: 700; }
.chat-item-time { margin-left: 10px; color: #748399; font-size: 11px; }
.chat-item-preview { color: #617086; font-size: 14px; }
.chat-item-bottom { min-height: 21px; }
.chat-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  flex: 0 0 auto;
}

.chat-state-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: #8A99AA;
}

.chat-state-icon .runa-icon { width: 14px; height: 14px; }

.chat-row-menu {
  width: 25px;
  height: 25px;
  margin-right: -4px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #718096;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.chat-item:hover .chat-row-menu,
.chat-row-menu:focus-visible { opacity: 1; }
.chat-row-menu:hover { color: #2378B8; background: #DFEDF7; }
.chat-row-menu .runa-icon { width: 17px; height: 17px; }

.chat-item .badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  background: #9BA8B7;
  box-shadow: none;
}

.chat-empty-state {
  min-height: 330px;
  padding: 56px 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #7B899B;
  text-align: center;
}

.chat-empty-state > .runa-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  padding: 11px;
  border-radius: 50%;
  color: #3293D2;
  background: #E7F3FC;
  box-sizing: content-box;
}

.chat-empty-state strong { color: #27364A; font-size: 17px; }
.chat-empty-state span { max-width: 260px; font-size: 13px; line-height: 1.45; }
.chat-empty-state button {
  min-width: 196px;
  min-height: 40px;
  margin-top: 8px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.chat-empty-primary { color: #FFF; border: 0; background: #3B9AD9; }
.chat-empty-primary:hover { background: #2788CF; }
.chat-empty-secondary { color: #3F566E; border: 1px solid #D9E2EA; background: #FFF; }
.chat-empty-secondary:hover { background: #F5F8FA; }
.chat-empty-state button .runa-icon { width: 17px; height: 17px; }
.chat-empty-search { min-height: 220px; }

.chat-context-menu {
  position: fixed;
  z-index: 1000;
  width: 218px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .20);
  backdrop-filter: blur(18px);
}

.chat-context-menu button {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  color: #243247;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-context-menu button:hover { background: #F1F5F9; }
.chat-context-menu button:disabled { opacity: .55; cursor: wait; }
.chat-context-menu .runa-icon { width: 18px; height: 18px; color: #61758A; }

.quick-compose-button {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 20;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFF;
  background: #3B9AD9;
  box-shadow: 0 12px 28px rgba(36, 128, 190, .35);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.quick-compose-button:hover { background: #2788CF; transform: translateY(-2px); }
.quick-compose-button .runa-icon { width: 23px; height: 23px; }

@media (min-width: 769px) {
  #app {
    box-sizing: border-box;
    padding: 14px 0 0 14px;
    background: #CFE5BC;
  }

  .sidebar {
    width: clamp(340px, 28vw, 480px);
    flex-basis: clamp(340px, 28vw, 480px);
    border: 0;
    border-radius: 22px 22px 0 0;
    background: #FFF;
    box-shadow: 8px 0 26px rgba(45, 75, 39, .10);
  }

  .bottom-nav { display: none; }

  .chat-area {
    border-left: 1px solid rgba(76, 118, 71, .12);
    background-color: #CFE5BC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%237DAA79' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M19 30c9-12 22 2 12 10-8 6-18-3-12-10Zm52-10 3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1 3-7Zm52 17c0-9 14-9 14 0s-14 9-14 0Zm7-7v14m-7-7h14'/%3E%3Cpath d='M27 105c14-12 34-3 34 12s-20 24-34 12c-9-8-9-16 0-24Zm12-3v30M21 117h40M104 92l22 9-8 19-22-9 8-19Zm-3 6 18 16m7-13-22 10'/%3E%3Ccircle cx='150' cy='145' r='17'/%3E%3Cpath d='M142 145h16m-8-8v16M77 158c4-10 16-10 20 0-4 10-16 10-20 0Zm10-5v10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
  }

  .chat-area-empty { color: transparent; font-size: 0; }
  .chat-area-empty::before { display: none; }
  .chat-area > .header { background: rgba(255, 255, 255, .96); }
  .messages { background: transparent; }
}

@media (max-width: 768px) {
  .sidebar-toolbar { padding-top: max(10px, env(safe-area-inset-top)); }
  .sidebar-self { display: none; }
  .sidebar { border-radius: 0; }
  .sidebar > .filter-tabs { margin-inline: 8px; }
  .sidebar > .filter-tabs .filter-tab { padding-inline: 12px; }
  .chat-list { padding-bottom: 142px; }
  .chat-row-menu { opacity: 1; }
  .quick-compose-button { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .quick-compose-menu { bottom: calc(136px + env(safe-area-inset-bottom)); }

  html.runa-native-android {
    --runa-native-safe-top: max(env(safe-area-inset-top, 0px), 28px);
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  }

  html.runa-native-android .chat-area > .header {
    height: calc(var(--header-height) + var(--runa-native-safe-top));
    min-height: calc(var(--header-height) + var(--runa-native-safe-top));
    padding-top: var(--runa-native-safe-top);
  }

  html.runa-native-android .sidebar-toolbar {
    min-height: calc(64px + var(--runa-native-safe-top));
    padding-top: calc(10px + var(--runa-native-safe-top));
  }
}

@media (max-width: 390px) {
  .filter-count { display: none; }
  .sidebar > .filter-tabs .filter-tab { padding-inline: 11px; }
  .chat-area > .header { gap: 4px; padding-inline: 8px; }
  .chat-area > .header #btn-csearch { display: grid; }
  .chat-area > .header #btn-video-call { display: none; }
  .chat-area > .header .btn-icon { width: 34px; height: 34px; flex: 0 0 34px; }
  .chat-area > .header .header-profile { gap: 6px !important; }
  .chat-area > .header .header-profile .avatar { width: 36px; height: 36px; }
}

/* Search stays in the contact header; the same button becomes close. */
.chat-area > .header.chat-search-open{position:relative;gap:8px}
.chat-search-open .header-profile{flex:0 0 auto!important}
.chat-search-open .header-profile > div:last-child{display:none}
.chat-search-open #btn-call,.chat-search-open #btn-video-call,.chat-search-open #btn-more{display:none}
.chat-search-bar{position:relative;display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:40px;padding:0 11px;border-radius:22px;background:#f2f5f8}
.chat-search-bar > .runa-icon{width:18px;height:18px;flex:none;color:#f58220}
.chat-search-bar input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#182435;font:inherit;font-size:14px}
.chat-search-bar input::placeholder{color:#8b98a8}
.chat-search-bar .chat-search-results{left:0;right:0;top:calc(100% + 10px)}
.chat-item.active{background:#f0f7fc;border-color:transparent}
.msg-bubble--image{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;overflow:hidden}
.msg-bubble--image .msg-meta{padding:2px 5px 0}
.msg-bubble--image .msg-text{padding:0 5px}
.msg-status.read{display:inline-block;letter-spacing:-3.5px;padding-right:3px;font-weight:700}
.msg-status.read .runa-icon{width:18px;height:13px;vertical-align:-.2em}
.scroll-bottom{right:20px;bottom:calc(90px + env(safe-area-inset-bottom));background:#fff;color:#264459;border:1px solid #dce6ec;box-shadow:0 4px 18px rgba(30,65,80,.15)}
.scroll-bottom:hover{background:#f3f8fb}
@media(max-width:550px){.chat-search-open .header-profile .avatar{width:32px;height:32px}.chat-search-bar{height:36px}}