.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.chat-card {
  display: flex;
  min-height: min(680px, calc(100vh - 220px));
  flex-direction: column;
}

.chat-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.chat-status { display: flex; align-items: center; gap: 7px; margin: 12px 0; color: var(--mint); font-size: 12px; }
.chat-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(142, 224, 191, .65); }
.chat-status.busy { color: var(--muted); }
.chat-status.busy span { background: var(--muted); box-shadow: none; }

.chat-messages {
  flex: 1;
  min-height: 340px;
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  border: 1px solid rgba(154, 206, 225, .1);
  border-radius: 18px;
  background: rgba(3, 13, 22, .35);
  padding: 14px;
  scrollbar-color: rgba(117, 216, 233, .35) transparent;
}

.chat-message { display: flex; align-items: flex-end; gap: 6px; margin: 8px 0; justify-content: flex-start; }
.chat-message.self { justify-content: flex-end; }
.chat-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(154, 206, 225, .24);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cyan), var(--mint));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
  color: #071722;
  font-size: 15px;
  font-weight: 900;
}
.chat-avatar.assistant-avatar { background: linear-gradient(145deg, #eca9ff, #88b6ff); }
.chat-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-avatar.failed img { display: none; }
.chat-bubble {
  max-width: min(78%, 680px);
  border: 1px solid rgba(154, 206, 225, .16);
  border-radius: 16px;
  background: rgba(16, 40, 60, .72);
  padding: 10px 12px;
  user-select: none;
  -webkit-touch-callout: none;
}
.chat-message.self .chat-bubble { background: rgba(117, 216, 233, .14); }
.chat-message.assistant .chat-bubble {
  border-color: rgba(231, 147, 255, .35);
  background: linear-gradient(135deg, rgba(103, 53, 126, .45), rgba(34, 44, 74, .82));
  box-shadow: 0 8px 28px rgba(126, 64, 157, .14);
}
.chat-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.chat-meta strong { color: var(--text); font-size: 12px; }
.chat-message.self .chat-meta strong { color: var(--cyan); }
.chat-message.assistant .chat-meta strong { color: #f0bdff; }
.chat-ai-badge { border-radius: 5px; background: rgba(237, 170, 255, .16); padding: 2px 5px; color: #f5d3ff; font-size: 9px; letter-spacing: .08em; }
.chat-meta time { color: var(--muted); font-size: 10px; }
.chat-text { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.chat-quoted { margin-bottom: 7px; border-left: 3px solid var(--cyan); background: rgba(3, 13, 22, .34); padding: 6px 8px; }
.chat-quoted strong, .chat-quoted span { display: block; }
.chat-quoted strong { color: var(--cyan); font-size: 11px; }
.chat-quoted span { margin-top: 2px; overflow: hidden; color: #bcd0d8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.chat-composer { margin-top: 12px; }
.chat-reply { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; border-left: 3px solid var(--cyan); border-radius: 10px; background: rgba(3, 13, 22, .55); padding: 8px 10px; }
.chat-reply div { min-width: 0; flex: 1; }
.chat-reply strong, .chat-reply span { display: block; }
.chat-reply strong { color: var(--cyan); font-size: 11px; }
.chat-reply span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply button { border: 0; background: transparent; color: var(--muted); }
.chat-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(30px, 1fr));
  gap: 2px;
  margin-bottom: 8px;
  border: 1px solid rgba(154, 206, 225, .16);
  border-radius: 14px;
  background: rgba(3, 13, 22, .92);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
}
.chat-emoji-picker button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 21px;
  line-height: 1;
}
.chat-emoji-picker button:hover, .chat-emoji-picker button:focus-visible { background: rgba(117, 216, 233, .13); }
.chat-compose-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; }
.chat-draft-field { position: relative; min-width: 0; }
.chat-draft-field textarea {
  width: 100%;
  min-height: 52px;
  max-height: 132px;
  resize: vertical;
  border: 1px solid rgba(153, 207, 226, .2);
  border-radius: 15px;
  outline: none;
  background: rgba(4, 14, 23, .65);
  color: var(--text);
  padding: 13px 52px 13px 15px;
  font: inherit;
}
.chat-draft-field textarea:focus { border-color: rgba(117, 216, 233, .65); box-shadow: 0 0 0 3px rgba(117, 216, 233, .09); }
.chat-emoji-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 21px;
}
.chat-emoji-toggle:hover, .chat-emoji-toggle[aria-expanded="true"] { background: rgba(117, 216, 233, .12); }
.chat-compose-row .primary { width: auto; min-width: 88px; margin: 0; }
.chat-hint { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--muted); font-size: 10px; }

@media (max-width: 760px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .tabs {
    position: fixed;
    z-index: 12;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    display: flex;
    width: auto;
    margin: 0;
    border-color: rgba(154, 206, 225, .24);
    background: rgba(8, 25, 39, .94);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .5);
    backdrop-filter: blur(20px);
  }
  .tab { min-width: 0; flex: 1; padding: 10px 5px; font-size: 11px; white-space: nowrap; }
  .chat-card { min-height: calc(100vh - 180px); padding: 17px; }
  .chat-messages { min-height: 240px; max-height: 58vh; max-height: 58dvh; }
  .chat-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 13px; }
  .chat-bubble { max-width: calc(88% - 36px); }
  .chat-emoji-picker { grid-template-columns: repeat(8, minmax(28px, 1fr)); padding: 5px 3px; }
  .chat-emoji-picker button { min-height: 31px; font-size: 19px; }
  .chat-hint span:first-child { display: none; }
  .chat-hint { justify-content: flex-end; }
}