/* Contact lists use the same geometry on the web and in the installed app. */
.sidebar {
  --contact-background:var(--side);
  --contact-secondary:var(--muted);
  position:relative;
}
.contacts-edit,.contacts-title,.contacts-compose {display:none;}
.contacts-search-bar {flex-shrink:0;}
.agent-rail {padding:0 0 18px;}
.rail-agents {gap:0;}
.agent-button {
  min-height:88px;
  gap:12px;
  padding:13px 15px 13px 24px;
  border-radius:0;
  isolation:isolate;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y;
}
.agent-button::after {
  content:"";
  position:absolute;
  left:85px;
  right:15px;
  bottom:0;
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
.agent-button.active::after {border-color:transparent;}
.agent-button .agent-avatar-wrap,.agent-button .agent-avatar-wrap>img {width:49px;height:49px;}
.agent-contact-info {align-self:stretch;padding-top:1px;}
.agent-contact-heading {gap:6px;line-height:1.3;}
.agent-contact-heading strong {font-weight:600;font-size:15px;}
.agent-contact-heading time {font-size:12px;color:var(--contact-secondary);}
.agent-contact-chevron {color:var(--subtle);flex-shrink:0;}
.agent-contact-chevron svg {width:12px;height:12px;stroke-width:2.7;}
.agent-contact-preview {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  white-space:normal;
  margin-top:2px;
  font-size:13px;
  line-height:1.36;
  max-height:2.72em;
  color:var(--contact-secondary);
  overflow-wrap:anywhere;
}
.agent-button>.unread-dot {
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border:0;
  margin:0;
}
.agent-muted {display:inline-flex;color:var(--contact-secondary);flex-shrink:0;}
.agent-muted svg {width:13px;height:13px;}
.agent-button>.agent-muted {position:absolute;left:7px;bottom:12px;}
.pinned-agents {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px 8px;
  padding:18px 16px 28px;
  flex-shrink:0;
}
.pinned-agents:empty,.agent-rail:not(.has-pinned-agents) .pinned-agents {display:none;}
.pinned-agent {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-width:0;
  padding:0;
  text-align:center;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y;
}
.pinned-agent .agent-avatar-wrap,.pinned-agent .agent-avatar-wrap>img {width:72px;height:72px;}
.pinned-agent .agent-avatar-wrap {border-radius:50%;box-shadow:0 6px 12px #00000009;}
.pinned-agent .agent-avatar-wrap>img {border-radius:50%;}
.pinned-agent.active .agent-avatar-wrap {outline:2px solid var(--blue);outline-offset:3px;}
.pinned-agent .pinned-agent-name {
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--contact-secondary);
  line-height:1.25;
  max-width:100%;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.pinned-agent-name .agent-muted {vertical-align:-2px;margin-right:3px;}
.pinned-agent .agent-dot {right:2px;bottom:2px;width:12px;height:12px;border-color:var(--contact-background);}
.pinned-agent .agent-unread {top:3px;right:2px;width:11px;height:11px;border-color:var(--contact-background);}
.agent-rail.has-pinned-agents .rail-agents .agent-button:nth-child(-n+3) {display:flex;}

@media (max-width:650px) {
  .sidebar {
    --contact-background:#fff;
    --contact-secondary:#8e8e93;
    --subtle:#c7c7cc;
    --line:#e5e5ea;
    --side:var(--contact-background);
    background:var(--contact-background);
  }
  .sidebar-toolbar {
    position:relative;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    height:77px;
    min-height:77px;
    padding:9px 19px 15px;
    z-index:2;
  }
  .sidebar-brand,.sidebar-toolbar-actions>.rail-add,.sidebar-toolbar-actions>[data-action=trash] {display:none;}
  .contacts-edit,.contacts-title {display:block;}
  .contacts-edit {
    justify-self:start;
    padding:10px 16px;
    min-height:42px;
    border-radius:26px;
    font-size:16px;
    font-weight:400;
    background:#f2f2f7e8;
    border:1px solid #dedee450;
    box-shadow:inset 0 1px 0 #ffffff80;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  .contacts-title {font-size:18px;font-weight:600;letter-spacing:-.4px;padding:0;line-height:1.25;}
  .sidebar-toolbar-actions {justify-self:end;gap:0;}
  .sidebar-toolbar .notification-button {
    width:43px;
    height:43px;
    border-radius:50%;
    background:#f2f2f7e8;
    border:1px solid #dedee450;
    box-shadow:inset 0 1px 0 #ffffff80;
  }
  .sidebar-toolbar .notification-button svg {width:22px;height:22px;}
  .contacts-search-bar {
    position:absolute;
    left:max(24px,env(safe-area-inset-left));
    right:max(24px,env(safe-area-inset-right));
    bottom:max(22px,env(safe-area-inset-bottom));
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    pointer-events:none;
  }
  .contacts-search-bar::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:-22px -24px -40px;
    background:linear-gradient(to bottom,transparent,var(--contact-background) 86%);
    pointer-events:none;
  }
  .contacts-search-bar .search-box {
    display:flex;
    flex:1;
    min-width:0;
    gap:10px;
    height:48px;
    padding:0 16px;
    margin:0;
    background:#f2f2f7db;
    border:1px solid #dedee490;
    box-shadow:0 2px 12px #00000008,inset 0 1px 0 #ffffff80;
    border-radius:28px;
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    pointer-events:auto;
  }
  .contacts-search-bar .search-box svg {width:21px;height:21px;}
  .contacts-search-bar .search-box input {font-size:17px;letter-spacing:-.2px;}
  .contacts-search-bar .search-box input::placeholder {color:var(--contact-secondary);opacity:1;}
  .contacts-search-bar .search-box:focus-within {border-color:var(--blue);}
  .contacts-compose {
    display:inline-flex;
    width:48px;
    height:48px;
    background:#f2f2f7db;
    border:1px solid #dedee490;
    box-shadow:0 2px 12px #00000008,inset 0 1px 0 #ffffff80;
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border-radius:50%;
    color:var(--text);
    pointer-events:auto;
  }
  .contacts-compose svg {width:24px;height:24px;}
  .sidebar-footer {display:none;}
  .agent-rail {padding:0 0 calc(98px + env(safe-area-inset-bottom));overscroll-behavior-y:contain;}
  .agent-button {
    min-height:80px;
    padding:12px 17px 12px 24px;
    gap:11px;
    border-radius:0;
  }
  .agent-button::after {left:75px;right:17px;}
  .agent-button.active::after {border-color:var(--line);}
  .agent-button.active {background:transparent;}
  .agent-button:hover {background:transparent;}
  .agent-button:active {background:#8e8e9316;}
  .agent-button .agent-avatar-wrap,.agent-button .agent-avatar-wrap>img {width:40px;height:40px;}
  .agent-contact-info {padding-top:0;}
  .agent-contact-heading {gap:5px;line-height:1.25;}
  .agent-contact-heading strong {font-size:17px;font-weight:600;letter-spacing:-.4px;}
  .agent-contact-heading time {display:block;font-size:13px;letter-spacing:-.2px;}
  .agent-contact-chevron svg {width:11px;height:11px;}
  .agent-contact-preview {font-size:15px;line-height:1.34;max-height:2.68em;letter-spacing:-.2px;margin-top:2px;}
  .agent-button>.unread-dot {width:9px;height:9px;left:7px;}
  .agent-button>.agent-muted {left:6px;bottom:13px;}
  .agent-button .agent-dot,.agent-button.active .agent-dot {border-color:var(--contact-background);}
  .pinned-agents {gap:21px 15px;padding:8px 24px 26px;}
  .pinned-agent {gap:8px;}
  .pinned-agent .agent-avatar-wrap,.pinned-agent .agent-avatar-wrap>img {width:clamp(72px,22vw,90px);height:clamp(72px,22vw,90px);}
  .pinned-agent .pinned-agent-name {font-size:12px;line-height:1.3;}
  .pinned-agent.active .agent-avatar-wrap {outline:0;}
  .pinned-agent .agent-dot,.pinned-agent .agent-unread {border-color:var(--contact-background);}
  .conversation-list {padding-bottom:calc(98px + env(safe-area-inset-bottom));}
  html[data-theme=dark] .sidebar {
    --contact-background:#000;
    --contact-secondary:#8e8e93;
    --text:#f5f5f7;
    --subtle:#48484a;
    --line:#29292b;
    --bg:#000;
    background:#000;
  }
  html[data-theme=dark] .contacts-edit,
  html[data-theme=dark] .sidebar-toolbar .notification-button,
  html[data-theme=dark] .contacts-search-bar .search-box,
  html[data-theme=dark] .contacts-compose {
    color:#f5f5f7;
    background:#202020dc;
    border-color:#3a3a3c;
    box-shadow:inset 0 1px 0 #ffffff05,0 2px 12px #00000030;
  }
  html[data-theme=dark] .contacts-search-bar .search-box:focus-within {border-color:var(--blue);}
}

@media (max-width:370px) {
  .sidebar-toolbar {padding-left:16px;padding-right:16px;}
  .contacts-search-bar {left:18px;right:18px;gap:9px;}
  .pinned-agents {padding-left:19px;padding-right:19px;gap:21px 10px;}
  .agent-contact-heading strong {font-size:16px;}
  .agent-contact-heading time {font-size:12px;}
  .agent-contact-preview {font-size:14px;}
}