.hidden-model-switch,
.model-switch-card,
.provider-toggle,
.provider-dot {
  display: none !important;
}

.account-btn > svg {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  padding: 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #2167c8 !important;
  background: transparent !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  box-shadow: none !important;
}

.message-tools .auto-speak-btn,
.message-tools .auto-speak-btn.active,
.message-tools .auto-speak-btn[aria-pressed="true"],
.message-tools .auto-speak-btn:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 861px) {
  .message-tools .history-btn,
  .message-tools .copy-btn,
  .message-tools .speak-btn,
  .message-tools .auto-speak-btn {
    background: transparent !important;
  }

  .message-tools .history-btn {
    display: none !important;
  }

  .message-tools .auto-speak-btn,
  .message-tools .auto-speak-btn.active,
  .message-tools .auto-speak-btn[aria-pressed="true"],
  .message-tools .auto-speak-btn:not(.active) {
    color: #2167c8 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .message-tools .auto-speak-btn .tool-label,
  .message-tools .auto-speak-btn.active .tool-label,
  .message-tools .auto-speak-btn[aria-pressed="true"] .tool-label,
  .message-tools .auto-speak-btn:not(.active) .tool-label {
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .message-tools .auto-speak-btn .tool-label::selection {
    color: inherit !important;
    background: transparent !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .main-shell {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .mobile-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 92 !important;
  }

  .chat {
    position: fixed !important;
    inset: 0 !important;
    z-index: 46 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: calc(env(safe-area-inset-top) + 82px) 16px calc(100dvh - 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    scrollbar-width: none !important;
  }

  .chat::-webkit-scrollbar {
    display: none !important;
  }

  .message {
    display: none !important;
    position: relative !important;
    z-index: 71 !important;
    pointer-events: auto !important;
  }

  .message.latest-user,
  .message.latest-assistant {
    display: flex !important;
  }

  .message:not(.latest-assistant) .message-bubble {
    max-width: min(84vw, 560px) !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(238, 245, 255, .92) !important;
    box-shadow: none !important;
  }

  .message:not(.latest-assistant) .message-body {
    max-height: none !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    display: block !important;
  }

  .message.latest-user .message-bubble {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 68px) !important;
    right: 22px !important;
    left: auto !important;
    z-index: 74 !important;
    width: min(58vw, 420px) !important;
    max-width: min(58vw, 420px) !important;
    max-height: 58px !important;
    padding: 9px 16px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 22px !important;
    color: #172033 !important;
    border: 1px solid rgba(183, 210, 250, .85) !important;
    background: rgba(211, 229, 255, .96) !important;
    box-shadow: 0 10px 24px rgba(69, 119, 190, .12) !important;
    transform: none !important;
  }

  .message.latest-user .message-body {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .message.latest-assistant {
    min-height: calc(100dvh - 150px) !important;
    pointer-events: none !important;
  }

  .persona-stage {
    top: calc(env(safe-area-inset-top) + 150px) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .persona-image {
    width: auto !important;
    max-width: min(62vw, 260px) !important;
    max-height: 250px !important;
    transform: translateY(18px) !important;
  }

  .message.latest-assistant .message-bubble {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 246px) !important;
    bottom: auto !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 60 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: var(--leo-mobile-bubble-max, 420px) !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, .88) !important;
    border-radius: 22px !important;
    display: block !important;
    color: #172033 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.08) !important;
    box-shadow: 0 14px 34px rgba(28, 75, 154, .12) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .message.latest-assistant .message-bubble::before,
  .message.latest-assistant .message-bubble::after {
    content: none !important;
    display: none !important;
  }

  .message.latest-assistant .message-body {
    box-sizing: border-box !important;
    max-height: var(--leo-mobile-bubble-max, 420px) !important;
    padding: 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .message.latest-assistant .message-tools {
    position: fixed !important;
    left: 24px !important;
    right: 24px !important;
    top: var(--leo-mobile-tools-top, calc(env(safe-area-inset-top) + 448px)) !important;
    bottom: auto !important;
    z-index: 120 !important;
    width: auto !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .message.latest-assistant .history-btn,
  .message.latest-assistant .copy-btn,
  .message.latest-assistant .speak-btn,
  .message.latest-assistant .auto-speak-btn,
  .message.latest-assistant .auto-speak-btn.active,
  .message.latest-assistant .auto-speak-btn[aria-pressed="true"],
  .message.latest-assistant .auto-speak-btn:not(.active) {
    height: 34px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-size: 10.5px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .message.latest-assistant .history-btn { width: 62px !important; }
  .message.latest-assistant .copy-btn { width: 58px !important; }
  .message.latest-assistant .speak-btn { width: 98px !important; }
  .message.latest-assistant .auto-speak-btn { width: 88px !important; }

  .message.latest-assistant .tool-label {
    display: inline !important;
    color: inherit !important;
    background: transparent !important;
    white-space: nowrap !important;
  }

  .message.latest-assistant .history-btn svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex: 0 0 auto !important;
  }

  #sendBtn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin-left: 2px !important;
    margin-right: 0 !important;
    border: 1px solid rgba(93, 159, 242, .35) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #8dc8ff 0%, #5fa8f6 100%) !important;
    box-shadow: 0 8px 18px rgba(74, 144, 226, .18) !important;
  }

  .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    gap: 7px !important;
  }

  .voice-btn {
    box-sizing: border-box !important;
    position: relative !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  .voice-btn.active,
  .voice-btn[aria-pressed="true"] {
    color: #fff !important;
    background: linear-gradient(135deg, #ff6a6a 0%, #e53935 100%) !important;
    border-color: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 0 0 7px rgba(229, 57, 53, .16), 0 10px 22px rgba(229, 57, 53, .25) !important;
    transform: scale(1.04) !important;
  }

  .voice-btn.active::after,
  .voice-btn[aria-pressed="true"]::after {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border: 2px solid rgba(229, 57, 53, .34) !important;
    border-radius: 999px !important;
    animation: leoRecordingPulse 1.05s ease-out infinite !important;
  }

  .voice-btn svg,
  #sendBtn svg {
    width: 22px !important;
    height: 22px !important;
  }

  #sendBtn svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .mobile-icon-btn.add {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(196, 218, 252, .9) !important;
    border-radius: 16px !important;
    color: #2167c8 !important;
    background: rgba(246, 249, 255, .86) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08) !important;
  }

  .mobile-icon-btn.add svg {
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  @keyframes leoRecordingPulse {
    0% {
      opacity: .9;
      transform: scale(.82);
    }
    100% {
      opacity: 0;
      transform: scale(1.22);
    }
  }

  .mobile-history-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 150 !important;
    padding: 0 !important;
    background: #f5f8ff !important;
    display: block !important;
  }

  .mobile-history-panel.hidden {
    display: none !important;
  }

  .mobile-history-card {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .mobile-history-head {
    min-height: calc(64px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 16px 0 !important;
    border-bottom: 1px solid #e6effd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #14213d !important;
    background: rgba(255, 255, 255, .94) !important;
  }

  .mobile-history-close {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f3f7ff !important;
    color: #1d4f9a !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .mobile-history-list {
    min-height: 0 !important;
    padding: 18px 14px calc(28px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .history-message {
    width: fit-content !important;
    max-width: 82% !important;
    display: grid !important;
    gap: 8px !important;
    border-radius: 20px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(35, 83, 150, .08) !important;
  }

  .history-message.user {
    align-self: flex-end !important;
    color: #0f2344 !important;
    background: #dcecff !important;
    border-top-right-radius: 8px !important;
  }

  .history-message.assistant {
    align-self: flex-start !important;
    border-top-left-radius: 8px !important;
  }

  .history-role {
    display: none !important;
  }

  .history-content {
    color: #182235 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .history-tools {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .history-copy-btn,
  .history-speak-btn {
    height: 32px !important;
    border: 1px solid #d8e7fb !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 11px !important;
    color: #2167c8 !important;
    background: #f5f9ff !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  .history-copy-btn svg {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .history-speak-btn .voice-wave {
    width: 20px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .history-speak-btn .voice-wave i {
    width: 3px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .history-speak-btn .voice-wave i:nth-child(1) { height: 6px !important; }
  .history-speak-btn .voice-wave i:nth-child(2) { height: 12px !important; }
  .history-speak-btn .voice-wave i:nth-child(3) { height: 16px !important; }
  .history-speak-btn .voice-wave i:nth-child(4) { height: 9px !important; }

  .history-speak-btn[data-status="playing"] .voice-wave i,
  .history-speak-btn[data-status="loading"] .voice-wave i {
    animation: leoVoiceBars .82s ease-in-out infinite alternate !important;
  }
}

@media (max-width: 380px) {
  .message.latest-assistant .message-bubble {
    top: calc(env(safe-area-inset-top) + 242px) !important;
    bottom: auto !important;
    left: 16px !important;
    right: 16px !important;
    max-height: var(--leo-mobile-bubble-max, 380px) !important;
  }

  .message.latest-assistant .message-body {
    max-height: var(--leo-mobile-bubble-max, 380px) !important;
    font-size: 14px !important;
  }

  .message.latest-assistant .message-tools {
    left: 18px !important;
    right: 18px !important;
    top: var(--leo-mobile-tools-top, calc(env(safe-area-inset-top) + 442px)) !important;
    bottom: auto !important;
    gap: 5px !important;
  }

  .message.latest-assistant .history-btn { width: 62px !important; }
  .message.latest-assistant .copy-btn { width: 54px !important; }
  .message.latest-assistant .speak-btn { width: 94px !important; }
  .message.latest-assistant .auto-speak-btn { width: 86px !important; }
}

.message-avatar {
  display: none !important;
}

@media (max-width: 860px) {
  body {
    background: #e9edf4 !important;
  }

  .app-shell {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 20%, #e9edf4 100%) !important;
  }

  .persona-stage {
    display: none !important;
  }

  .chat {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: calc(60px + env(safe-area-inset-top)) 12px calc(122px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    background: #edf2f7 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .message {
    align-items: flex-end !important;
    gap: 8px !important;
  }

  .message.user {
    justify-content: flex-end !important;
  }

  .message.assistant {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .message-avatar {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-left: 6px !important;
    box-shadow: 0 8px 18px rgba(35, 77, 142, .14) !important;
  }

  .message.user .message-avatar {
    display: none !important;
  }

  .message-bubble {
    max-width: min(74vw, 520px) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(15, 34, 60, .05) !important;
  }

  .message.user .message-bubble {
    color: #1f2d3d !important;
    border-color: #e0e7ef !important;
    background: #ffffff !important;
    border-top-right-radius: 8px !important;
  }

  .message.assistant .message-bubble {
    color: #10243f !important;
    border-color: rgba(160, 201, 255, .72) !important;
    background: linear-gradient(135deg, #cfe4ff 0%, #a9d0ff 100%) !important;
    border-top-left-radius: 8px !important;
  }

  .message.assistant .message-bubble::before,
  .message.assistant .message-bubble::after {
    content: none !important;
  }

  .message.assistant .message-body strong {
    color: #0d4a9e !important;
  }

  .message.user .message-body strong {
    color: #1f2d3d !important;
  }

  .message-files span {
    max-width: 100% !important;
  }

  .message.user .message-files span {
    background: #f5f8fc !important;
    color: #345d9c !important;
  }

  .message.assistant .message-files span {
    background: rgba(255, 255, 255, .46) !important;
    color: #285a9d !important;
  }

  .message-tools {
    margin-top: 8px !important;
    gap: 8px !important;
  }

  .message-tools .history-btn {
    display: none !important;
  }

  .message.latest-assistant .message-bubble {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: min(74vw, 520px) !important;
    max-height: none !important;
  }

  .message.latest-assistant .message-body {
    max-height: none !important;
    font-size: 15px !important;
  }

  .message.latest-assistant .message-tools {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 70 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(212, 223, 237, .9) !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(247, 249, 252, .98) !important;
    box-shadow: 0 -10px 30px rgba(19, 35, 60, .08) !important;
  }

  .composer-main {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
    gap: 6px !important;
  }

  .composer textarea {
    font-size: 15px !important;
    min-height: 44px !important;
  }

  .voice-btn,
  #sendBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .mobile-header {
    backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, .78) !important;
    border-bottom: 1px solid rgba(223, 230, 239, .9) !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-shell,
  .main-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .app-shell {
    display: block !important;
  }

  .main-shell {
    display: block !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }

  .persona-stage {
    display: none !important;
  }

  .chat {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    flex: none !important;
    min-height: 0 !important;
    padding: 14px 12px 16px !important;
    margin: 0 !important;
    background: #edf2f7 !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-y !important;
  }

  .message {
    display: flex !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  .message.latest-user,
  .message.latest-assistant {
    display: flex !important;
  }

  .message.assistant {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .message-avatar {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    margin-left: 0 !important;
  }

  .message.user .message-avatar {
    display: none !important;
  }

  .message-bubble,
  .message.latest-user .message-bubble,
  .message.latest-assistant .message-bubble {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: min(74vw, 520px) !important;
    max-height: none !important;
    height: auto !important;
    padding: 12px 14px !important;
  }

  .message.user .message-bubble {
    color: #1f2d3d !important;
    border-color: #e0e7ef !important;
    background: #ffffff !important;
    border-top-right-radius: 8px !important;
  }

  .message.assistant .message-bubble {
    color: #10243f !important;
    border-color: rgba(180, 211, 255, .9) !important;
    background: linear-gradient(135deg, #d7e8ff 0%, #bddcff 100%) !important;
    border-top-left-radius: 8px !important;
  }

  .message.assistant .message-bubble::before,
  .message.assistant .message-bubble::after {
    content: none !important;
    display: none !important;
  }

  .message.latest-assistant .message-body {
    max-height: none !important;
    font-size: 15px !important;
  }

  .message-tools {
    position: static !important;
    margin-top: 8px !important;
  }

  .message.latest-assistant .message-tools {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .composer {
    position: static !important;
    width: calc(100% - 24px) !important;
    margin: 12px auto 18px !important;
    border-radius: 18px !important;
    background: rgba(247, 249, 252, .98) !important;
    box-shadow: 0 -10px 30px rgba(19, 35, 60, .08) !important;
  }

  .composer-main {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
    gap: 6px !important;
  }

  .composer textarea {
    font-size: 15px !important;
    min-height: 44px !important;
  }

  .voice-btn,
  #sendBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 860px) {
  .mobile-brand > span:last-child {
    display: none !important;
  }

  .message.assistant {
    gap: 8px !important;
  }

  .message-avatar {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    margin: 8px 0 0 4px !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 8px 18px rgba(33, 83, 154, .16) !important;
  }

  .message.latest-assistant .history-btn,
  .message.latest-assistant .copy-btn,
  .message.latest-assistant .speak-btn,
  .message.latest-assistant .auto-speak-btn,
  .message.latest-assistant .auto-speak-btn.active,
  .message.latest-assistant .auto-speak-btn[aria-pressed="true"],
  .message.latest-assistant .auto-speak-btn:not(.active) {
    color: #245ea8 !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(89, 140, 205, .46) !important;
    box-shadow: 0 3px 10px rgba(35, 84, 145, .10) !important;
    text-shadow: none !important;
  }

  .message.latest-assistant .history-btn:hover,
  .message.latest-assistant .copy-btn:hover,
  .message.latest-assistant .speak-btn:hover,
  .message.latest-assistant .auto-speak-btn:hover {
    color: #174a8c !important;
    background: rgba(255, 255, 255, .96) !important;
  }
}

@media (max-width: 860px) {
  .message.assistant .message-tools,
  .message.latest-assistant .message-tools {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 36px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .message.assistant .copy-btn,
  .message.assistant .speak-btn,
  .message.assistant .auto-speak-btn,
  .message.assistant .auto-speak-btn.active,
  .message.assistant .auto-speak-btn[aria-pressed="true"],
  .message.assistant .auto-speak-btn:not(.active),
  .message.latest-assistant .copy-btn,
  .message.latest-assistant .speak-btn,
  .message.latest-assistant .auto-speak-btn,
  .message.latest-assistant .auto-speak-btn.active,
  .message.latest-assistant .auto-speak-btn[aria-pressed="true"],
  .message.latest-assistant .auto-speak-btn:not(.active) {
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(116, 166, 225, .58) !important;
    border-radius: 999px !important;
    color: #245ea8 !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 3px 10px rgba(35, 84, 145, .10) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .message.assistant .copy-btn,
  .message.latest-assistant .copy-btn {
    width: 70px !important;
  }

  .message.assistant .speak-btn,
  .message.latest-assistant .speak-btn {
    width: 108px !important;
  }

  .message.assistant .auto-speak-btn,
  .message.latest-assistant .auto-speak-btn,
  .message.assistant .auto-speak-btn.active,
  .message.latest-assistant .auto-speak-btn.active,
  .message.assistant .auto-speak-btn[aria-pressed="true"],
  .message.latest-assistant .auto-speak-btn[aria-pressed="true"],
  .message.assistant .auto-speak-btn:not(.active),
  .message.latest-assistant .auto-speak-btn:not(.active) {
    width: 98px !important;
    color: #245ea8 !important;
    background: rgba(255, 255, 255, .88) !important;
    border-color: rgba(116, 166, 225, .58) !important;
    box-shadow: 0 3px 10px rgba(35, 84, 145, .10) !important;
    padding: 0 12px !important;
  }

  .message.assistant .auto-speak-btn .tool-label,
  .message.assistant .auto-speak-btn.active .tool-label,
  .message.assistant .auto-speak-btn[aria-pressed="true"] .tool-label,
  .message.assistant .auto-speak-btn:not(.active) .tool-label,
  .message.latest-assistant .auto-speak-btn .tool-label,
  .message.latest-assistant .auto-speak-btn.active .tool-label,
  .message.latest-assistant .auto-speak-btn[aria-pressed="true"] .tool-label,
  .message.latest-assistant .auto-speak-btn:not(.active) .tool-label {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    display: inline !important;
    color: #245ea8 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .message.assistant .copy-btn svg,
  .message.assistant .auto-speak-btn svg,
  .message.latest-assistant .copy-btn svg,
  .message.latest-assistant .auto-speak-btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  .message.assistant .voice-wave,
  .message.latest-assistant .voice-wave {
    width: 22px !important;
    height: 18px !important;
  }
}

@media (max-width: 860px) {
  .message.user .message-bubble {
    color: #17345d !important;
    border-color: rgba(143, 190, 246, .86) !important;
    background: linear-gradient(135deg, #d5e9ff 0%, #b9d9ff 100%) !important;
    box-shadow: 0 8px 18px rgba(47, 111, 190, .10) !important;
  }

  .message.assistant .message-bubble {
    color: #172033 !important;
    border-color: rgba(214, 226, 241, .96) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 8px 18px rgba(15, 34, 60, .06) !important;
  }

  .message.user .message-body strong,
  .message.assistant .message-body strong {
    color: #0d4a9e !important;
  }
}

.voice-hold-sheet {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 170;
  width: min(720px, calc(100vw - 24px));
  padding: 18px 20px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(225, 241, 255, .96) 0%, rgba(72, 138, 255, .96) 54%, rgba(32, 96, 232, .98) 100%);
  box-shadow: 0 22px 48px rgba(33, 88, 172, .20);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(24px);
  transition: opacity .18s ease, transform .18s ease;
}

.app-shell.voice-recording .composer {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(18px) !important;
}

.app-shell.voice-recording .voice-hold-sheet {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.voice-hold-card {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.voice-hold-text {
  color: rgba(255, 255, 255, .96);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
}

.voice-hold-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 28px;
}

.voice-hold-wave i {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  animation: leoVoiceBars 1s ease-in-out infinite alternate;
}

.voice-hold-wave i:nth-child(2) { height: 16px; animation-delay: .09s; }
.voice-hold-wave i:nth-child(3) { height: 22px; animation-delay: .18s; }
.voice-hold-wave i:nth-child(4) { height: 14px; animation-delay: .27s; }
.voice-hold-wave i:nth-child(5) { height: 18px; animation-delay: .36s; }
.voice-hold-wave i:nth-child(6) { height: 12px; animation-delay: .45s; }
.voice-hold-wave i:nth-child(7) { height: 20px; animation-delay: .54s; }
.voice-hold-wave i:nth-child(8) { height: 11px; animation-delay: .63s; }

.voice-hold-sheet.cancelled {
  background: linear-gradient(180deg, rgba(255, 240, 240, .96) 0%, rgba(244, 84, 84, .96) 54%, rgba(214, 36, 52, .98) 100%);
}

@media (max-width: 860px) {
  .voice-hold-sheet {
    width: calc(100vw - 16px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 16px 16px 18px;
    border-radius: 22px;
  }

  .voice-hold-card {
    min-height: 164px;
    gap: 16px;
  }

  .voice-hold-text {
    font-size: 16px;
  }
}

/* 20260819 final chat-mode override: desktop and mobile share the same avatar-chat language. */
.persona-stage {
  display: none !important;
}

.main-shell {
  min-height: 100dvh !important;
  background: linear-gradient(180deg, #f7faff 0%, #eef4fb 42%, #e9eef6 100%) !important;
}

.chat {
  width: min(920px, calc(100vw - 330px)) !important;
  flex: 1 1 auto !important;
  margin: 0 auto !important;
  padding: 34px 12px 132px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  background: transparent !important;
}

.chat::-webkit-scrollbar {
  display: none !important;
}

.message {
  width: 100% !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  position: relative !important;
}

.message.user {
  justify-content: flex-end !important;
}

.message.assistant {
  justify-content: flex-start !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.message-avatar {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  margin: 0 0 2px 2px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 16% !important;
  border: 2px solid rgba(255, 255, 255, .95) !important;
  box-shadow: 0 8px 20px rgba(43, 90, 155, .16) !important;
  background: #fff !important;
}

.message.user .message-avatar {
  display: none !important;
}

.message-bubble,
.message.latest-user .message-bubble,
.message.latest-assistant .message-bubble {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: min(690px, 78%) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  overflow: visible !important;
  box-shadow: 0 8px 20px rgba(20, 52, 92, .06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.message.user .message-bubble,
.message.latest-user .message-bubble {
  color: #123864 !important;
  border: 1px solid rgba(129, 184, 246, .72) !important;
  border-top-right-radius: 8px !important;
  background: linear-gradient(135deg, #d8ebff 0%, #b9dcff 100%) !important;
}

.message.assistant .message-bubble,
.message.latest-assistant .message-bubble {
  color: #172033 !important;
  border: 1px solid rgba(219, 228, 240, .98) !important;
  border-top-left-radius: 8px !important;
  background: rgba(255, 255, 255, .98) !important;
}

.message.assistant .message-bubble::before,
.message.assistant .message-bubble::after,
.message.latest-assistant .message-bubble::before,
.message.latest-assistant .message-bubble::after {
  content: none !important;
  display: none !important;
}

.message-body,
.message.latest-assistant .message-body {
  max-height: none !important;
  overflow: visible !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

.message-body p {
  margin: 0 0 8px !important;
}

.message-body p:last-child {
  margin-bottom: 0 !important;
}

.message-body strong {
  color: #0f58b4 !important;
  font-weight: 760 !important;
}

.message-tools,
.message.assistant .message-tools,
.message.latest-assistant .message-tools {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: 34px !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.message-tools .history-btn {
  display: none !important;
}

.message-tools .copy-btn,
.message-tools .speak-btn,
.message-tools .auto-speak-btn,
.message-tools .auto-speak-btn.active,
.message-tools .auto-speak-btn[aria-pressed="true"],
.message-tools .auto-speak-btn:not(.active) {
  box-sizing: border-box !important;
  height: 32px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(132, 175, 226, .56) !important;
  border-radius: 999px !important;
  color: #2462a8 !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 3px 10px rgba(31, 74, 128, .08) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

.message-tools .auto-speak-btn,
.message-tools .auto-speak-btn.active,
.message-tools .auto-speak-btn[aria-pressed="true"],
.message-tools .auto-speak-btn:not(.active) {
  color: #315f93 !important;
  background: transparent !important;
  border-color: rgba(132, 175, 226, .56) !important;
  box-shadow: none !important;
}

.message-tools .copy-btn {
  width: 64px !important;
}

.message-tools .speak-btn {
  width: 104px !important;
}

.message-tools .auto-speak-btn {
  width: 94px !important;
}

.message-tools .tool-label,
.message-tools .auto-speak-btn .tool-label,
.message-tools .auto-speak-btn.active .tool-label,
.message-tools .auto-speak-btn[aria-pressed="true"] .tool-label {
  display: inline !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.message-tools .copy-btn svg,
.message-tools .auto-speak-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

.message-tools .voice-wave {
  width: 22px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
}

.message-tools .voice-wave i {
  width: 3px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .8 !important;
}

.message-tools .voice-wave i:nth-child(2) { height: 13px !important; }
.message-tools .voice-wave i:nth-child(3) { height: 18px !important; }
.message-tools .voice-wave i:nth-child(4) { height: 10px !important; }

.message-tools .speak-btn[data-status="playing"] .voice-wave i,
.message-tools .speak-btn[data-status="loading"] .voice-wave i {
  animation: leoVoiceBars .72s ease-in-out infinite alternate !important;
}

.composer {
  position: fixed !important;
  left: calc(50% + 140px) !important;
  right: auto !important;
  bottom: 18px !important;
  z-index: 82 !important;
  width: min(920px, calc(100vw - 330px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(198, 215, 236, .92) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 42px rgba(32, 70, 120, .12) !important;
}

.composer-main {
  grid-template-columns: 40px minmax(0, 1fr) 42px 42px !important;
  gap: 7px !important;
  align-items: end !important;
}

.composer textarea {
  min-height: 42px !important;
  font-size: 15px !important;
}

.voice-btn,
#sendBtn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
}

.voice-btn {
  color: #265f9e !important;
  border: 1px solid rgba(173, 198, 229, .9) !important;
  background: #f5f8fc !important;
}

.voice-btn.active,
.voice-btn[aria-pressed="true"] {
  color: #fff !important;
  border-color: #2f7cf6 !important;
  background: #2f7cf6 !important;
  box-shadow: 0 0 0 6px rgba(47, 124, 246, .16) !important;
}

#sendBtn {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #4ba3ff, #2f7cf6) !important;
}

.voice-btn svg,
#sendBtn svg {
  width: 22px !important;
  height: 22px !important;
}

.voice-btn-label {
  display: none !important;
}

.mobile-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

.mobile-icon-btn:not(.add) {
  gap: 4px !important;
}

.mobile-icon-btn.add svg {
  width: 22px !important;
  height: 22px !important;
}

.mobile-brand {
  color: #172033 !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

.composer-hint:not(:empty) {
  position: fixed !important;
  left: 50% !important;
  top: max(74px, calc(env(safe-area-inset-top) + 64px)) !important;
  bottom: auto !important;
  z-index: 180 !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(153, 190, 235, .72) !important;
  border-radius: 999px !important;
  color: #1d579b !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 12px 28px rgba(28, 72, 128, .14) !important;
  font-size: 12px !important;
  text-align: center !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  html,
  body,
  .app-shell,
  .main-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .main-shell {
    display: block !important;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 96 !important;
    height: calc(54px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 10px 0 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, .86) !important;
    border-bottom: 1px solid rgba(220, 229, 240, .9) !important;
  }

  .chat {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: calc(100dvh - 152px) !important;
    padding: 14px 12px 18px !important;
    margin: 0 !important;
    gap: 12px !important;
    overflow: visible !important;
    background: #edf2f7 !important;
  }

  .message {
    display: flex !important;
  }

  .message.assistant {
    gap: 7px !important;
  }

  .message-avatar {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
    margin: 4px 0 0 2px !important;
    object-position: 50% 14% !important;
  }

  .message-bubble,
  .message.latest-user .message-bubble,
  .message.latest-assistant .message-bubble {
    position: relative !important;
    max-width: min(78vw, 520px) !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  .message.user .message-bubble,
  .message.latest-user .message-bubble {
    border-top-right-radius: 8px !important;
  }

  .message.assistant .message-bubble,
  .message.latest-assistant .message-bubble {
    border-top-left-radius: 8px !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  .message-body,
  .message.latest-assistant .message-body {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .message-tools,
  .message.assistant .message-tools,
  .message.latest-assistant .message-tools {
    height: 32px !important;
    margin-top: 8px !important;
    gap: 6px !important;
  }

  .message-tools .copy-btn {
    width: 58px !important;
  }

  .message-tools .speak-btn {
    width: 96px !important;
  }

  .message-tools .auto-speak-btn {
    width: 88px !important;
  }

  .message-tools .copy-btn,
  .message-tools .speak-btn,
  .message-tools .auto-speak-btn {
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }

  .composer {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .composer-main {
    grid-template-columns: 38px minmax(0, 1fr) minmax(112px, 34vw) 40px !important;
    gap: 7px !important;
  }

  .plus-btn,
  #sendBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .voice-btn {
    width: 100% !important;
    min-width: 112px !important;
    height: 40px !important;
    border-radius: 999px !important;
    gap: 6px !important;
  }

  .voice-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .voice-btn-label {
    display: inline !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .voice-btn.active .voice-btn-label,
  .voice-btn[aria-pressed="true"] .voice-btn-label {
    color: #fff !important;
  }

  .composer textarea {
    min-height: 40px !important;
    font-size: 15px !important;
  }

.app-shell.voice-recording .composer {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 20260829 composer alignment final: keep the three main controls on one visual line. */
@media (min-width: 861px) {
  .app-shell.sidebar-collapsed .composer {
    left: 50% !important;
    width: min(1760px, calc(100vw - 72px)) !important;
  }

  .app-shell.sidebar-collapsed .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) auto 42px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .app-shell.sidebar-collapsed .composer-provider {
    justify-self: end !important;
  }

  .app-shell.sidebar-collapsed .composer-provider-btn {
    min-width: 110px !important;
    height: 42px !important;
  }

  .app-shell.sidebar-collapsed #sendBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    justify-self: end !important;
  }
}

/* 20260819 sentence voice feedback override. */
.composer-main {
  grid-template-columns: 40px minmax(0, 1fr) minmax(118px, 142px) 42px !important;
}

.voice-btn {
  width: 100% !important;
  min-width: 118px !important;
  height: 42px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}

.voice-btn-label {
  display: inline !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 740 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.app-shell.voice-recording .composer {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) !important;
}

.app-shell.voice-recording .voice-btn {
  color: #fff !important;
  border-color: #2f7cf6 !important;
  background: linear-gradient(135deg, #4ba3ff, #2f7cf6) !important;
  box-shadow: 0 0 0 7px rgba(47, 124, 246, .16) !important;
}

@media (max-width: 860px) {
  .composer-main {
    grid-template-columns: 38px minmax(0, 1fr) minmax(112px, 34vw) 40px !important;
  }

  .app-shell.voice-recording .composer {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* 20260819 big-head hero override: restore the earlier centered avatar card. */
.persona-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  min-height: calc(100dvh - 170px) !important;
  padding: 42px 0 24px !important;
  background: transparent !important;
}

.persona-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
}

.persona-image {
  width: 228px !important;
  height: 228px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 14% !important;
  box-shadow: 0 18px 38px rgba(31, 82, 150, .18) !important;
  background: #fff !important;
  image-rendering: auto !important;
}

.hero-bubble {
  width: min(840px, calc(100vw - 120px)) !important;
}

.hero-bubble-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 116px !important;
  padding: 18px 28px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(205, 220, 238, .96) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 40px rgba(24, 54, 96, .08) !important;
}

.hero-bubble-text {
  color: #132036 !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

.hero-bubble .message-tools {
  display: none !important;
}

.chat {
  margin-top: 0 !important;
}

.persona-stage .persona-card,
.persona-stage .hero-bubble,
.persona-stage .hero-bubble-card {
  visibility: visible !important;
  opacity: 1 !important;
}

.persona-stage {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 860px) {
  .persona-stage {
    min-height: calc(100dvh - 176px) !important;
    padding: 24px 0 18px !important;
  }

  .persona-image {
    width: 152px !important;
    height: 152px !important;
  }

  .hero-bubble {
    width: calc(100vw - 32px) !important;
  }

  .hero-bubble-card {
    min-height: 104px !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
  }

  .hero-bubble-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

/* 20260819 hybrid hero-chat override: restore the saved half-body opening screen, then continue as chat history. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.app-shell {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

.main-shell {
  min-height: 100dvh !important;
  padding: 0 0 136px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(87, 154, 245, .18), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 46%, #edf3fb 100%) !important;
}

.persona-stage {
  width: min(1040px, calc(100vw - 330px)) !important;
  min-height: calc(100dvh - 136px) !important;
  margin: 0 auto !important;
  padding: 0 24px 34px !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  background: transparent !important;
}

.persona-card {
  width: min(620px, 82%) !important;
  height: clamp(300px, 43vh, 430px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 0 0 38px 38px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(96, 165, 250, .18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .9)) !important;
  box-shadow: 0 22px 54px rgba(35, 78, 138, .08) !important;
}

.persona-image {
  width: auto !important;
  height: clamp(330px, 50vh, 500px) !important;
  max-width: min(58vw, 520px) !important;
  max-height: none !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateY(0) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 30px rgba(22, 55, 104, .12)) !important;
}

.hero-bubble {
  width: min(960px, 100%) !important;
  margin: -4px auto 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.hero-bubble-card {
  min-height: clamp(176px, 25vh, 260px) !important;
  padding: 28px 34px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  border: 1px solid rgba(159, 198, 245, .78) !important;
  border-radius: 28px !important;
  color: #132036 !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 24px 58px rgba(32, 75, 132, .12) !important;
}

.hero-bubble-text {
  width: 100% !important;
  color: #132036 !important;
  font-size: clamp(18px, 1.55vw, 23px) !important;
  font-weight: 430 !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.hero-bubble-card .message-tools,
.hero-bubble .message-tools {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: 36px !important;
  margin: auto 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chat {
  width: min(920px, calc(100vw - 330px)) !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  padding: 22px 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow: visible !important;
  background: transparent !important;
}

.message {
  display: flex !important;
  width: 100% !important;
  position: relative !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.message.user {
  justify-content: flex-end !important;
}

.message.assistant {
  justify-content: flex-start !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.message-avatar {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  margin: 0 0 2px 2px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  border: 2px solid rgba(255, 255, 255, .95) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(43, 90, 155, .16) !important;
}

.message.user .message-avatar {
  display: none !important;
}

.message-bubble,
.message.latest-user .message-bubble,
.message.latest-assistant .message-bubble {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: min(690px, 78%) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  overflow: visible !important;
  box-shadow: 0 8px 20px rgba(20, 52, 92, .06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.message.user .message-bubble,
.message.latest-user .message-bubble {
  color: #0f2f57 !important;
  border: 1px solid rgba(129, 184, 246, .72) !important;
  border-top-right-radius: 8px !important;
  background: linear-gradient(135deg, #d7eafe 0%, #b9dbff 100%) !important;
}

.message.assistant .message-bubble,
.message.latest-assistant .message-bubble {
  color: #172033 !important;
  border: 1px solid rgba(219, 228, 240, .98) !important;
  border-top-left-radius: 8px !important;
  background: rgba(255, 255, 255, .98) !important;
}

.message.assistant .message-bubble::before,
.message.assistant .message-bubble::after,
.message.latest-assistant .message-bubble::before,
.message.latest-assistant .message-bubble::after {
  content: none !important;
  display: none !important;
}

.message-body,
.message.latest-assistant .message-body {
  max-height: none !important;
  overflow: visible !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

@media (max-width: 860px) {
  .app-shell {
    display: block !important;
  }

  .main-shell {
    padding: 0 0 calc(104px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 44%, #edf3fb 100%) !important;
  }

  .mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 96 !important;
    height: calc(54px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 10px 0 !important;
    background: rgba(255, 255, 255, .9) !important;
    border-bottom: 1px solid rgba(220, 229, 240, .9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .persona-stage {
    width: 100% !important;
    min-height: calc(100dvh - 116px - env(safe-area-inset-top)) !important;
    padding: 0 14px 22px !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  .persona-card {
    width: min(100%, 430px) !important;
    height: clamp(258px, 39dvh, 328px) !important;
    border-radius: 0 0 30px 30px !important;
  }

  .persona-image {
    height: clamp(304px, 46dvh, 382px) !important;
    max-width: min(82vw, 360px) !important;
    transform: translateY(0) !important;
  }

  .hero-bubble {
    width: min(100%, 430px) !important;
    margin-top: -2px !important;
  }

  .hero-bubble-card {
    min-height: clamp(170px, 27dvh, 244px) !important;
    padding: 18px 18px 16px !important;
    gap: 16px !important;
    border-radius: 24px !important;
  }

  .hero-bubble-text {
    font-size: 16.5px !important;
    line-height: 1.68 !important;
  }

  .chat {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px 0 !important;
    gap: 14px !important;
    background: #edf3fb !important;
  }

  .message {
    display: flex !important;
  }

  .message-avatar {
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
    margin: 0 0 2px 2px !important;
  }

  .message-bubble,
  .message.latest-user .message-bubble,
  .message.latest-assistant .message-bubble {
    position: relative !important;
    max-width: min(78vw, 520px) !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  .message-tools,
  .message.assistant .message-tools,
  .message.latest-assistant .message-tools,
  .hero-bubble-card .message-tools {
    height: 32px !important;
    margin-top: 8px !important;
    gap: 6px !important;
  }

  .message-tools .copy-btn,
  .message-tools .speak-btn,
  .message-tools .auto-speak-btn {
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }

  .message-tools .copy-btn {
    width: 58px !important;
  }

  .message-tools .speak-btn {
    width: 96px !important;
  }

  .message-tools .auto-speak-btn {
    width: 88px !important;
  }
}

@media (max-width: 380px) {
  .persona-card {
    height: clamp(240px, 37dvh, 300px) !important;
  }

  .persona-image {
    height: clamp(286px, 44dvh, 350px) !important;
    max-width: min(84vw, 330px) !important;
  }

  .hero-bubble-card {
    min-height: clamp(156px, 25dvh, 220px) !important;
    padding: 16px 16px 14px !important;
  }

  .hero-bubble-text {
    font-size: 16px !important;
  }
}

/* 20260820 stability pass: keep hero anchored and compact the opening card. */
.persona-stage {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  z-index: 2 !important;
  margin-bottom: 8px !important;
}

.persona-card {
  height: auto !important;
  min-height: 0 !important;
}

.persona-image {
  width: min(300px, 24vw) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

.hero-bubble {
  margin-top: 2px !important;
}

.hero-bubble-card {
  min-height: 0 !important;
  padding: 12px 18px 10px !important;
  gap: 6px !important;
}

.hero-bubble-card .message-tools,
.hero-bubble .message-tools {
  margin: 10px 0 0 !important;
}

@media (max-width: 860px) {
  .persona-stage {
    padding: 6px 12px 0 !important;
  }

  .persona-card {
    width: min(100%, 420px) !important;
  }

  .persona-image {
    width: min(70vw, 250px) !important;
    object-position: center top !important;
  }

  .hero-bubble {
    width: min(100%, 420px) !important;
  }

  .hero-bubble-card {
    padding: 12px 14px 10px !important;
    gap: 6px !important;
  }

  .hero-bubble-text {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
}

/* 20260819 final correction: restore earlier scale, fix sidebar scroll, and simplify voice mode. */
html,
body {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.app-shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.main-shell {
  position: relative !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 128px !important;
}

.persona-stage {
  width: min(860px, calc(100vw - 360px)) !important;
  min-height: calc(100dvh - 140px) !important;
  padding: 8px 24px 18px !important;
  justify-content: flex-start !important;
}

.persona-card {
  width: min(560px, 76%) !important;
  height: clamp(250px, 38vh, 360px) !important;
}

.persona-image {
  height: clamp(290px, 44vh, 420px) !important;
  max-width: min(52vw, 420px) !important;
}

.hero-bubble {
  width: min(760px, 100%) !important;
  margin: -2px auto 0 !important;
}

.hero-bubble-card {
  min-height: 110px !important;
  padding: 18px 22px 16px !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
}

.hero-bubble-text {
  font-size: 16px !important;
  line-height: 1.68 !important;
}

.chat {
  width: min(860px, calc(100vw - 360px)) !important;
  padding: 14px 12px 0 !important;
  gap: 14px !important;
}

.message-body,
.message.latest-assistant .message-body {
  font-size: 15px !important;
  line-height: 1.68 !important;
}

.message-bubble,
.message.latest-user .message-bubble,
.message.latest-assistant .message-bubble {
  max-width: min(680px, 80%) !important;
  padding: 12px 14px !important;
}

.message-tools,
.message.assistant .message-tools,
.message.latest-assistant .message-tools,
.hero-bubble-card .message-tools {
  height: 34px !important;
  margin-top: 10px !important;
  gap: 8px !important;
}

.message-tools .copy-btn,
.message-tools .speak-btn,
.message-tools .auto-speak-btn,
.message.latest-assistant .copy-btn,
.message.latest-assistant .speak-btn,
.message.latest-assistant .auto-speak-btn {
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.message-tools .copy-btn,
.message.latest-assistant .copy-btn {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

.message-tools .speak-btn,
.message.latest-assistant .speak-btn {
  min-width: 104px !important;
}

.message-tools .auto-speak-btn,
.message.latest-assistant .auto-speak-btn {
  min-width: 92px !important;
}

.composer {
  left: calc(50% + 140px) !important;
  width: min(860px, calc(100vw - 360px)) !important;
}

.composer-main {
  grid-template-columns: 40px minmax(0, 1fr) 42px 42px !important;
  gap: 8px !important;
}

.voice-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

.voice-btn-label {
  display: none !important;
}

.app-shell.voice-mode .composer-main {
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

.app-shell.voice-mode .composer textarea {
  display: none !important;
}

.app-shell.voice-mode .voice-btn {
  width: 100% !important;
  min-width: 122px !important;
  grid-column: 2 !important;
  border-radius: 999px !important;
  color: #1f65b7 !important;
  border-color: rgba(156, 193, 238, .9) !important;
  background: #f7fbff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

.app-shell.voice-mode .voice-btn-label {
  display: inline !important;
}

.app-shell.voice-mode #sendBtn {
  display: none !important;
}

.app-shell.voice-recording .voice-hold-sheet {
  display: block !important;
  opacity: 1 !important;
}

.app-shell.voice-recording .voice-btn {
  color: #fff !important;
  border-color: #2f7cf6 !important;
  background: linear-gradient(135deg, #4ba3ff, #2f7cf6) !important;
  box-shadow: 0 0 0 6px rgba(47, 124, 246, .16) !important;
}

/* 20260820 layout tightening: show full face and pull chat upward. */
.persona-stage {
  min-height: 0 !important;
  padding: 12px 0 6px !important;
  gap: 4px !important;
  justify-content: flex-start !important;
}

.persona-card {
  width: min(560px, 76%) !important;
  height: clamp(188px, 27vh, 268px) !important;
  align-items: center !important;
  justify-content: center !important;
}

.persona-image {
  height: clamp(224px, 31vh, 300px) !important;
  max-width: min(44vw, 320px) !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.hero-bubble {
  margin-top: 0 !important;
}

.hero-bubble-card {
  min-height: 96px !important;
}

.chat {
  padding-top: 8px !important;
}

@media (max-width: 860px) {
  html,
  body {
    overflow: hidden !important;
  }

  .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: fixed !important;
  }

  .main-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .persona-stage {
    width: 100% !important;
    min-height: 0 !important;
    padding: 4px 12px 8px !important;
    gap: 4px !important;
  }

  .persona-card {
    width: min(100%, 418px) !important;
    height: clamp(198px, 28dvh, 250px) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .persona-image {
    height: clamp(214px, 30dvh, 284px) !important;
    max-width: min(74vw, 292px) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .hero-bubble {
    width: min(100%, 430px) !important;
    margin-top: -2px !important;
  }

  .hero-bubble-card {
    min-height: 90px !important;
    padding: 14px 16px 12px !important;
    gap: 8px !important;
  }

  .hero-bubble-text {
    font-size: 15.5px !important;
    line-height: 1.64 !important;
  }

  .chat {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px 0 !important;
  }

  .composer {
    left: 8px !important;
    width: auto !important;
    transform: none !important;
  }

  .app-shell.voice-mode .composer-main {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .app-shell.voice-mode .voice-btn {
    min-width: 114px !important;
  }
}

/* 20260820 hero-stability-final: isolate opening hero from chat scroll. */
.main-shell {
  scroll-behavior: auto !important;
}

.persona-stage {
  width: min(860px, calc(100vw - 360px)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  padding: 8px 24px 0 !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  transform: none !important;
}

.persona-card {
  width: min(560px, 76%) !important;
  height: clamp(188px, 27vh, 268px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 0 0 38px 38px !important;
}

.persona-image {
  display: block !important;
  width: auto !important;
  height: clamp(238px, 33vh, 330px) !important;
  max-width: min(44vw, 360px) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
}

.hero-bubble {
  width: min(760px, 100%) !important;
  margin: 6px auto 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-bubble-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 20px 12px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.hero-bubble-text {
  font-size: 16px !important;
  line-height: 1.62 !important;
}

.hero-bubble .message-tools,
.hero-bubble-card .message-tools {
  margin: 8px 0 0 !important;
}

.chat {
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
  padding-top: 10px !important;
}

@media (max-width: 860px) {
  .persona-stage {
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 6px 12px 0 !important;
    gap: 4px !important;
  }

  .persona-card {
    width: min(100%, 420px) !important;
    height: clamp(188px, 26dvh, 252px) !important;
  }

  .persona-image {
    width: auto !important;
    height: clamp(220px, 31dvh, 290px) !important;
    max-width: min(70vw, 286px) !important;
  }

  .hero-bubble {
    width: min(100%, 420px) !important;
    margin-top: 4px !important;
  }

  .hero-bubble-card {
    padding: 12px 14px 10px !important;
    gap: 6px !important;
  }

  .hero-bubble-text {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
}

/* 20260820 viewport-stability-final: browser must not crop the app after refresh. */
html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.app-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.sidebar {
  top: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.main-shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 860px) {
  .app-shell {
    display: block !important;
  }
}

/* 20260820 desktop-full-viewport-final: keep sidebar top/bottom and composer visible on every desktop resolution. */
@media (min-width: 861px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    grid-template-rows: 100dvh !important;
    align-items: stretch !important;
  }

  .sidebar {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    overflow: hidden !important;
  }

  .sidebar-head,
  .gemini-nav,
  .history-title,
  .account-btn {
    flex: 0 0 auto !important;
  }

  .conversation-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }

  .account-btn {
    margin-top: auto !important;
  }

  .main-shell {
    position: relative !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 120px !important;
  }

  .persona-stage {
    padding-top: 10px !important;
  }

  .composer {
    position: fixed !important;
    left: calc(280px + ((100vw - 280px) - min(860px, calc(100vw - 360px))) / 2) !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: min(860px, calc(100vw - 360px)) !important;
    transform: none !important;
    z-index: 30 !important;
  }
}

/* 20260820 desktop-scroll-recovery-final: desktop uses page scroll, not locked internal scroll. */
@media (min-width: 861px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  .app-shell {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .conversation-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 10px !important;
  }

  .account-btn {
    margin-top: auto !important;
    flex: 0 0 auto !important;
  }

  .main-shell {
    position: relative !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 136px !important;
    box-sizing: border-box !important;
  }

  .composer {
    position: fixed !important;
    left: calc(280px + ((100vw - 280px) - min(860px, calc(100vw - 360px))) / 2) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: min(860px, calc(100vw - 360px)) !important;
    transform: none !important;
    z-index: 50 !important;
  }
}

/* 20260820 visual reset-final: center hero and normalize tool buttons. */
.persona-card {
  align-items: center !important;
}

.persona-image {
  width: min(330px, 24vw) !important;
  height: clamp(238px, 33vh, 330px) !important;
  max-width: min(44vw, 360px) !important;
  object-position: center center !important;
}

.message-tools .copy-btn,
.message.latest-assistant .copy-btn {
  width: 68px !important;
  min-width: 68px !important;
  padding: 0 10px !important;
}

.message-tools .copy-btn .tool-label,
.message.latest-assistant .copy-btn .tool-label {
  display: inline !important;
}

@media (max-width: 860px) {
  .persona-card {
    align-items: center !important;
  }

  .persona-image {
    width: min(250px, 66vw) !important;
    height: clamp(220px, 31dvh, 290px) !important;
    max-width: min(70vw, 286px) !important;
    object-position: center center !important;
  }
}

/* 20260820 sidebar-scroll-final: sidebar itself stays fixed; only history list scrolls. */
@media (min-width: 861px) {
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    padding: 14px 10px 12px !important;
    box-sizing: border-box !important;
  }

  .sidebar-head,
  .gemini-nav,
  .history-title {
    min-height: 0 !important;
  }

  .conversation-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 10px !important;
  }

  .account-btn {
    align-self: end !important;
    margin: 0 !important;
    min-height: 64px !important;
    width: 100% !important;
    background: #fff !important;
  }
}

/* 20260820 sidebar-viewport-lock-final: desktop sidebar never participates in page scroll. */
@media (min-width: 861px) {
  html,
  body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  .app-shell:not(.sidebar-collapsed) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 100dvh) !important;
    align-items: stretch !important;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    align-self: stretch !important;
    padding: 14px 10px 12px !important;
    box-sizing: border-box !important;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar-head,
  .app-shell:not(.sidebar-collapsed) .gemini-nav,
  .app-shell:not(.sidebar-collapsed) .history-title,
  .app-shell:not(.sidebar-collapsed) .account-btn {
    flex: none !important;
    min-height: 0 !important;
  }

  .app-shell:not(.sidebar-collapsed) .conversation-list {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 10px !important;
    overscroll-behavior: contain !important;
  }

  .app-shell:not(.sidebar-collapsed) .account-btn {
    align-self: end !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .app-shell:not(.sidebar-collapsed) .main-shell {
    position: relative !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    padding-bottom: 136px !important;
  }
}

/* 20260820 bottom-controls-visible-final: keep account and composer fully visible. */
@media (min-width: 861px) {
  .app-shell:not(.sidebar-collapsed) .sidebar {
    position: relative !important;
    padding-bottom: 12px !important;
  }

  .app-shell:not(.sidebar-collapsed) .conversation-list {
    max-height: calc(100dvh - 292px) !important;
    padding-bottom: 12px !important;
  }

  .app-shell:not(.sidebar-collapsed) .account-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 8px !important;
    background: #fff !important;
    border-top: 1px solid #eef1f5 !important;
    z-index: 25 !important;
  }

  .app-shell:not(.sidebar-collapsed) .main-shell {
    padding-bottom: 112px !important;
  }

  .app-shell:not(.sidebar-collapsed) .chat {
    padding-bottom: 128px !important;
  }

  .app-shell:not(.sidebar-collapsed) .composer {
    position: fixed !important;
    top: auto !important;
    left: calc(280px + ((100vw - 280px) - min(860px, calc(100vw - 360px))) / 2) !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(860px, calc(100vw - 360px)) !important;
    min-height: 64px !important;
    max-height: 132px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 200 !important;
    box-sizing: border-box !important;
  }
}

/* 20260820 visual-viewport-bottom-final: compensate browser zoom/OS chrome viewport gap. */
@media (min-width: 861px) {
  .app-shell:not(.sidebar-collapsed) {
    height: var(--leo-visual-height, 100vh) !important;
    min-height: var(--leo-visual-height, 100vh) !important;
    max-height: var(--leo-visual-height, 100vh) !important;
    grid-template-rows: minmax(0, var(--leo-visual-height, 100vh)) !important;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar,
  .app-shell:not(.sidebar-collapsed) .main-shell {
    height: var(--leo-visual-height, 100vh) !important;
    min-height: 0 !important;
    max-height: var(--leo-visual-height, 100vh) !important;
  }

  .app-shell:not(.sidebar-collapsed) .account-btn {
    bottom: calc(14px + var(--leo-fixed-bottom-inset, 0px)) !important;
  }

  .app-shell:not(.sidebar-collapsed) .composer {
    bottom: calc(18px + var(--leo-fixed-bottom-inset, 0px)) !important;
  }
}

/* 20260821 voice-hold-send-final: Doubao-like press-to-talk composer. */
.app-shell.voice-mode .composer-main {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 54px !important;
  padding: 6px !important;
}

.app-shell.voice-mode .plus-btn,
.app-shell.voice-mode .composer textarea,
.app-shell.voice-mode #sendBtn,
.app-shell.voice-mode .composer-provider {
  display: none !important;
}

.app-shell.voice-mode .voice-btn {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  color: #2d5f9f !important;
  background: rgba(243, 248, 255, .96) !important;
  border: 1px solid rgba(154, 190, 235, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  font-size: 15px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.app-shell.voice-mode .voice-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

.app-shell.voice-mode .voice-btn-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell.voice-recording .composer-main {
  background: linear-gradient(135deg, rgba(68, 147, 255, .18), rgba(38, 111, 235, .26)) !important;
  border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(47, 124, 246, .22), inset 0 0 0 1px rgba(70, 132, 230, .16) !important;
}

.app-shell.voice-recording .voice-btn {
  height: 48px !important;
  min-height: 48px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #5ca8ff, #2f7cf6) !important;
  border-color: rgba(255,255,255,.58) !important;
  box-shadow: 0 0 0 7px rgba(47, 124, 246, .16), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.app-shell.voice-recording .voice-btn::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 2px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.88) !important;
  animation: leoVoicePulse 1s ease-in-out infinite !important;
}

@keyframes leoVoicePulse {
  0%, 100% { transform: scale(.72); opacity: .58; }
  50% { transform: scale(1.18); opacity: 1; }
}

.voice-hold-sheet,
.app-shell.voice-recording .voice-hold-sheet {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-shell.voice-recording .composer-hint {
  display: none !important;
}

@media (max-width: 860px) {
  .app-shell.voice-mode .composer {
    min-height: 66px !important;
  }

  .app-shell.voice-mode .composer-main {
    min-height: 56px !important;
    padding: 6px !important;
  }

  .app-shell.voice-mode .voice-btn {
    height: 46px !important;
    font-size: 15px !important;
  }

  .app-shell.voice-recording .voice-btn {
    height: 48px !important;
  }
}

@media (max-width: 860px) {
  .app-shell:not(.voice-mode):not(.voice-recording) .composer-main {
    grid-template-columns: 40px minmax(0, 1fr) max-content 40px 40px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 56px !important;
    padding: 6px 8px !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .plus-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .composer textarea {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .composer-provider {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: fit-content !important;
    justify-self: start !important;
    overflow: visible !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .voice-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) #sendBtn {
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .voice-keyboard-btn {
    display: none !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .composer-provider-btn {
    min-width: 0 !important;
    width: fit-content !important;
    max-width: none !important;
    padding: 0 10px !important;
    gap: 4px !important;
    height: 40px !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .composer-provider-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .app-shell:not(.voice-mode):not(.voice-recording) .provider-dot {
    display: none !important;
  }
}

/* 20260821 doubao-voice-mode-final: attachment + press-to-talk + keyboard controls. */
.voice-keyboard-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #183e72 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

.voice-keyboard-btn svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.voice-keyboard-btn:hover,
.voice-keyboard-btn:focus-visible,
.plus-btn:hover,
.plus-btn:focus-visible {
  background: rgba(54, 113, 190, .10) !important;
  outline: none !important;
}

.voice-keyboard-btn:active,
.plus-btn:active {
  transform: scale(.96) !important;
}

.app-shell.voice-mode .composer-main {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(212, 224, 239, .94) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(39, 74, 117, .10) !important;
}

.app-shell.voice-mode .plus-btn {
  display: inline-grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #183e72 !important;
  background: transparent !important;
}

.app-shell.voice-mode .plus-btn svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-shell.voice-mode .voice-btn {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #183e72 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  touch-action: none !important;
}

.app-shell.voice-mode .voice-btn svg {
  display: none !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-shell.voice-mode .voice-btn-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.app-shell.voice-mode .voice-keyboard-btn {
  display: inline-flex !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.app-shell.voice-mode #sendBtn,
.app-shell.voice-mode .composer-provider,
.app-shell.voice-mode .composer textarea {
  display: none !important;
}

.app-shell.voice-recording .composer {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.app-shell.voice-recording .composer-main {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  min-height: 58px !important;
  padding: 5px 8px !important;
  border: 2px solid rgba(136, 184, 244, .82) !important;
  border-radius: 30px !important;
  background: rgba(240, 247, 255, .96) !important;
  box-shadow: 0 0 0 4px rgba(107, 166, 239, .13), 0 8px 24px rgba(67, 119, 184, .12) !important;
}

.app-shell.voice-recording .voice-btn {
  height: 48px !important;
  min-height: 48px !important;
  color: #2a62a5 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-shell.voice-recording .voice-btn svg {
  display: block !important;
}

.app-shell.voice-recording .voice-btn-label {
  color: #2a62a5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.app-shell.voice-recording .voice-keyboard-btn,
.app-shell.voice-recording .plus-btn {
  color: #2a62a5 !important;
}

.app-shell.voice-recording .voice-btn::after {
  display: none !important;
}

@media (max-width: 860px) {
  .app-shell.voice-mode .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .app-shell.voice-mode .plus-btn,
  .app-shell.voice-mode .voice-keyboard-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .app-shell.voice-mode .voice-btn {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .app-shell.voice-recording .composer-main {
    min-height: 64px !important;
    padding: 6px 8px !important;
  }
}

/* 20260821 voice-label-and-thinking-final. */
.app-shell.voice-mode .voice-btn {
  overflow: visible !important;
  text-indent: 0 !important;
}

.app-shell.voice-mode:not(.voice-recording) .voice-btn-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 84px !important;
  max-width: none !important;
  overflow: visible !important;
  color: #183e72 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.app-shell.voice-mode:not(.voice-recording) .voice-btn::before {
  content: none !important;
}

.app-shell.voice-mode .voice-btn svg {
  display: none !important;
}

.app-shell.voice-mode #input {
  display: none !important;
  caret-color: transparent !important;
}

.message.thinking .message-bubble {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message.thinking .message-body {
  color: #7b8797 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.message.thinking .thinking-label {
  color: #98a3b2 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.message.thinking .thinking-title {
  color: #687587 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.message.thinking .thinking-detail {
  color: #9aa5b3 !important;
  font-size: 13px !important;
}

/* 20260821 voice-button-readable-final: never render an empty blue pill. */
.app-shell.voice-mode .voice-btn,
.app-shell.voice-mode .voice-btn.active,
.app-shell.voice-mode .voice-btn[aria-pressed="true"] {
  color: #183e72 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
}

.app-shell.voice-mode .voice-btn::before,
.app-shell.voice-mode .voice-btn::after,
.app-shell.voice-mode .voice-btn.active::before,
.app-shell.voice-mode .voice-btn.active::after,
.app-shell.voice-mode .voice-btn[aria-pressed="true"]::before,
.app-shell.voice-mode .voice-btn[aria-pressed="true"]::after {
  content: none !important;
  display: none !important;
}

.app-shell.voice-mode .voice-btn-label,
.app-shell.voice-mode:not(.voice-recording) .voice-btn-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 84px !important;
  max-width: none !important;
  height: auto !important;
  color: #183e72 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* DeepSeek-style safe reasoning summary: separate, timed, and collapsible. */
.message.thinking .message-bubble,
.message.thinking.thinking-complete .message-bubble {
  width: min(690px, 78%) !important;
  max-width: min(690px, 78%) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.thinking-panel {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(186, 198, 214, .7) !important;
  border-radius: 14px !important;
  background: rgba(245, 247, 250, .92) !important;
  color: #667386 !important;
}

.thinking-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

.thinking-summary::-webkit-details-marker {
  display: none !important;
}

.thinking-summary-title {
  color: #5e6c7d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.thinking-summary-time {
  color: #98a4b3 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
}

.thinking-summary-chevron {
  width: 7px !important;
  height: 7px !important;
  margin-left: auto !important;
  border-right: 1.5px solid #8491a2 !important;
  border-bottom: 1.5px solid #8491a2 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform .18s ease !important;
}

.thinking-panel[open] .thinking-summary-chevron {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.thinking-progress-host {
  padding-top: 10px !important;
}

.thinking-progress {
  min-width: 0 !important;
}

.thinking-label {
  margin-bottom: 5px !important;
  color: #8a96a5 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.thinking-title,
.thinking-status {
  color: #697789 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.thinking-detail {
  margin-top: 5px !important;
  color: #8c98a7 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.thinking-summary-list {
  display: grid !important;
  gap: 7px !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.thinking-summary-list li {
  position: relative !important;
  padding-left: 13px !important;
  color: #697789 !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
}

.thinking-summary-list li::before {
  content: '' !important;
  position: absolute !important;
  top: .62em !important;
  left: 0 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #83a9d6 !important;
}

.thinking-progress.has-reasoning-summary .thinking-detail {
  display: none !important;
}

.message.thinking .answer-block.hidden {
  display: none !important;
}

.message.thinking .answer-block:not(.hidden),
.message.thinking-complete .answer-block:not(.hidden) {
  display: block !important;
  margin-top: 12px !important;
}

.message.thinking-complete .answer-block .message-body {
  color: #172033 !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

@media (max-width: 860px) {
  .message.thinking .message-bubble,
  .message.thinking.thinking-complete .message-bubble {
    width: min(100%, 88vw) !important;
    max-width: min(100%, 88vw) !important;
  }
}

.app-shell.voice-recording .voice-btn,
.app-shell.voice-recording .voice-btn.active,
.app-shell.voice-recording .voice-btn[aria-pressed="true"] {
  color: #2a62a5 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-shell.voice-recording .voice-btn-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  color: #2a62a5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 20260821 voice-caption-visibility-final: stable readable voice mode. */
.app-shell.voice-mode .voice-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #183e72 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
}

.app-shell.voice-mode .voice-btn .voice-btn-label {
  display: none !important;
}

.app-shell.voice-mode .voice-mode-caption {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 96px !important;
  height: auto !important;
  margin: 0 !important;
  color: #183e72 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.app-shell.voice-mode .voice-btn::before,
.app-shell.voice-mode .voice-btn::after {
  display: none !important;
  content: none !important;
}

.app-shell.voice-recording .voice-mode-caption {
  color: #2a62a5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.app-shell.voice-mode .composer,
.app-shell.voice-recording .composer {
  background: #ffffff !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

.app-shell.voice-mode .composer-main,
.app-shell.voice-recording .composer-main {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
}

.app-shell.voice-recording .composer-main {
  background: #f4f8ff !important;
}

/* 20260824 auth-state-final: never reveal the application shell before login. */
#loginView:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  min-height: 100dvh !important;
  background: #f6f9ff !important;
}

#loginView.hidden,
#appView.hidden {
  display: none !important;
}

/* 20260901 account-register: customer-facing login and registration entry. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: -8px 0 16px;
  padding: 5px;
  border: 1px solid rgba(207, 222, 243, .82);
  border-radius: 16px;
  background: #edf4ff;
}

.auth-tabs button {
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: #65758c;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.auth-tabs button.active {
  color: #174a8c;
  background: #fff;
  box-shadow: 0 8px 18px rgba(35, 84, 145, .10);
}

.login-card .auth-link-btn {
  width: fit-content;
  align-self: center;
  height: auto;
  margin-top: 10px;
  padding: 0;
  border: 0;
  color: #2a6fd6;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}

.login-card .auth-link-btn:hover {
  color: #174a8c;
  text-decoration: underline;
}

.reset-card {
  position: relative;
}

.reset-card p {
  margin: -2px 0 16px;
  color: #6b7d95;
  font-size: 14px;
  line-height: 1.5;
}

.reset-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.reset-step {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: #edf4ff;
  color: #6e7f98;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.reset-step.active {
  color: #174a8c;
  background: #dceaff;
}

.reset-step-panel {
  display: grid;
  gap: 12px;
}

.reset-card .auth-link-btn {
  margin-top: 12px;
}

.reset-card .login-error {
  margin-top: 14px;
}

.login-card input::placeholder {
  color: #97a4b8;
}

/* 20260901 voice-keyboard-placement: keep desktop voice-mode controls aligned. */
@media (min-width: 861px) {
  .app-shell.voice-mode .composer-main,
  .app-shell.voice-recording .composer-main {
    display: grid !important;
    grid-template-columns: 52px minmax(160px, 1fr) 52px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }

  .app-shell.voice-mode .plus-btn,
  .app-shell.voice-recording .plus-btn {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  .app-shell.voice-mode .voice-btn,
  .app-shell.voice-recording .voice-btn {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .app-shell.voice-mode .voice-keyboard-btn,
  .app-shell.voice-recording .voice-keyboard-btn {
    grid-column: 3 !important;
    justify-self: center !important;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 44px !important;
  }
}

/* 20260824 mobile-latest-message-safe-area: fixed composer must not cover the newest answer. */
@media (max-width: 860px) {
  .main-shell {
    padding-bottom: calc(184px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(184px + env(safe-area-inset-bottom)) !important;
  }

  .chat {
    padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
  }

  .message.latest-assistant {
    scroll-margin-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
  }
}

/* 20260824 mobile-message-grid-final: one stable conversation rhythm for every assistant reply. */
@media (max-width: 860px) {
  .chat {
    padding-bottom: calc(204px + env(safe-area-inset-bottom)) !important;
  }

  .message {
    margin-bottom: 16px !important;
    scroll-margin-bottom: calc(204px + env(safe-area-inset-bottom)) !important;
  }

  .message.assistant {
    gap: 6px !important;
  }

  .message-avatar {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;
    margin: 0 0 0 4px !important;
  }

  .message.assistant .message-bubble,
  .message.assistant.thinking .message-bubble,
  .message.latest-assistant .message-bubble {
    width: min(82vw, 520px) !important;
    max-width: min(82vw, 520px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .message.thinking-complete .thinking-panel[hidden] + .answer-block:not(.hidden) {
    margin-top: 0 !important;
  }
}

/* 20260830 active-agent-workbench: right-side workbench tasks and WeChat reminders. */
.agent-panel {
  box-sizing: border-box;
  position: fixed;
  right: 22px;
  top: 76px;
  bottom: 104px;
  z-index: 80;
  width: 318px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(190, 211, 242, .9);
  border-radius: 24px;
  background: rgba(248, 251, 255, .94);
  box-shadow: 0 22px 54px rgba(32, 83, 158, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.agent-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agent-panel-head strong { display: block; color: #172033; font-size: 16px; line-height: 1.25; font-weight: 650; }
.agent-eyebrow { display: none; }
.agent-panel-toggle, .agent-dock-btn, .agent-link-btn, .task-actions button, .agent-form button { cursor: pointer; font: inherit; }
.agent-panel-toggle { width: 34px; height: 34px; border: 1px solid rgba(195, 214, 241, .92); border-radius: 12px; color: #2167c8; background: #fff; }
.agent-panel-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agent-connection { border-radius: 14px; background: #edf4ff; }
.agent-connection summary { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; cursor: pointer; list-style: none; }
.agent-connection summary::-webkit-details-marker { display: none; }
.agent-connection summary > svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: #6d7d93; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.agent-connection[open] summary > svg { transform: rotate(180deg); }
.agent-status { color: #7b8797; font-size: 13px; font-weight: 560; }
.agent-status.connected { color: #1f7a4d; }
.agent-connection-label { margin-left: auto; color: #6d7d93; font-size: 12px; }
.agent-connection-actions { display: flex; justify-content: flex-end; gap: 14px; padding: 0 10px 9px; }
.agent-link-btn { border: 0; color: #2167c8; background: transparent; font-size: 13px; font-weight: 600; }
.agent-link-btn:disabled { color: #9aa6b8; cursor: not-allowed; }
.agent-card { display: flex; min-height: 0; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid rgba(207, 222, 243, .9); border-radius: 18px; background: rgba(255, 255, 255, .82); }
.agent-task-card { flex: 1; }
.agent-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-card-title { color: #253247; font-size: 13px; font-weight: 680; }
.agent-card-meta, .agent-card-help { color: #8290a3; font-size: 11px; line-height: 1.4; }
.agent-card-help { margin-top: -5px; }
.agent-card-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #2167c8; background: #eaf2ff; font-size: 11px; font-weight: 700; }
.agent-suggestions, .task-list { display: flex; min-height: 0; flex-direction: column; gap: 8px; overflow: visible; }
.agent-suggestion { display: block; width: 100%; padding: 10px; border: 1px solid rgba(197, 216, 243, .85); border-radius: 14px; text-align: left; color: #253247; background: #f7fbff; }
.agent-suggestion strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 650; }
.agent-suggestion span, .agent-empty { color: #65758c; font-size: 12px; line-height: 1.45; }
.agent-form { display: grid; gap: 8px; }
.agent-form input, .agent-form textarea, .agent-form select { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(197, 216, 243, .9); border-radius: 12px; color: #172033; background: #fff; font: inherit; font-size: 13px; outline: none; }
.agent-form textarea { resize: vertical; min-height: 72px; }
.agent-form input:focus, .agent-form textarea:focus, .agent-form select:focus { border-color: #6a9ce8; box-shadow: 0 0 0 3px rgba(74, 128, 211, .14); }
.agent-form button { height: 38px; border: 0; border-radius: 13px; color: #fff; background: #2167c8; font-weight: 650; }
.task-item { padding: 10px; border: 1px solid rgba(199, 216, 239, .9); border-radius: 15px; background: #fff; }
.task-main strong { display: block; color: #1c2a3d; font-size: 13px; font-weight: 650; }
.task-main span, .task-main p, .task-main em { display: block; margin: 4px 0 0; color: #66758a; font-size: 12px; line-height: 1.42; }
.task-main em { color: #c24138; font-style: normal; }
.task-empty { min-height: 42px; display: flex; align-items: center; }
.task-actions { display: flex; gap: 8px; margin-top: 9px; }
.task-actions button { flex: 1; height: 30px; border: 1px solid rgba(199, 216, 239, .9); border-radius: 10px; color: #2167c8; background: #f7fbff; font-size: 12px; font-weight: 600; }
.task-actions .task-delete { color: #a23a34; }
.agent-dock-btn { position: fixed; right: 24px; bottom: 118px; z-index: 82; display: none; height: 42px; padding: 0 14px; border: 1px solid rgba(190, 211, 242, .95); border-radius: 999px; color: #2167c8; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 32px rgba(32, 83, 158, .16); font-size: 13px; font-weight: 650; }
.agent-dock-btn span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; border-radius: 999px; color: #fff; background: #2167c8; font-size: 12px; }
.app-shell.agent-panel-collapsed .agent-panel { display: none; }
.app-shell.agent-panel-collapsed .agent-dock-btn { display: inline-flex; align-items: center; }
@media (min-width: 1220px) { .app-shell:not(.agent-panel-collapsed) .main-shell { padding-right: 360px !important; } }
@media (max-width: 1219px) { .agent-panel { top: 82px; bottom: 112px; width: min(318px, calc(100vw - 32px)); } }
@media (max-width: 860px) {
  .agent-panel { left: 12px; right: 12px; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); width: auto; max-height: min(68dvh, 560px); border-radius: 22px; z-index: 130; }
  .agent-panel-head strong { font-size: 15px; }
  .agent-card { padding: 10px; }
  .agent-dock-btn { right: 14px; bottom: calc(94px + env(safe-area-inset-bottom)); z-index: 132; }
  .agent-panel:not(.collapsed) + .agent-dock-btn, .app-shell:not(.agent-panel-collapsed) .agent-dock-btn { display: none; }
}

/* 20260830 codex-style agent drawer and adaptive composer. */
:root { --leo-agent-panel-width: 360px; }

@media (min-width: 861px) {
.agent-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--leo-agent-panel-width) !important;
    max-height: none !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 26px 0 0 26px !important;
    padding: 22px 18px 20px !important;
    background: rgba(249, 252, 255, .98) !important;
  }

  .app-shell:not(.agent-panel-collapsed) .main-shell {
    padding-right: calc(var(--leo-agent-panel-width) + 28px) !important;
  }

  .app-shell:not(.agent-panel-collapsed) .persona-stage,
  .app-shell:not(.agent-panel-collapsed) .chat {
    width: min(860px, calc(100vw - 280px - var(--leo-agent-panel-width) - 72px)) !important;
  }

  .app-shell:not(.agent-panel-collapsed) .composer {
    left: calc(280px + 24px) !important;
    right: calc(var(--leo-agent-panel-width) + 24px) !important;
    width: auto !important;
    transform: none !important;
  }

  .app-shell:not(.agent-panel-collapsed) .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) max-content 44px 44px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .app-shell:not(.agent-panel-collapsed) .composer-provider {
    min-width: 0 !important;
    justify-self: end !important;
  }

  .app-shell:not(.agent-panel-collapsed) .composer-provider-btn {
    min-width: 88px !important;
    max-width: 112px !important;
    white-space: nowrap !important;
  }

  .app-shell:not(.agent-panel-collapsed) .voice-btn,
  .app-shell:not(.agent-panel-collapsed) #sendBtn {
    justify-self: end !important;
  }
}

@media (max-width: 860px) {
  .agent-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(92vw, 360px) !important;
    max-height: none !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 24px 0 0 24px !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
    background: rgba(249, 252, 255, .99) !important;
  }

  .app-shell:not(.agent-panel-collapsed) .agent-dock-btn { display: none !important; }
}

/* 20260830 wechat-settings: user-configurable reminder delivery. */
.settings-modal {
  z-index: 1000 !important;
}

.settings-card {
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: min(88dvh, 820px) !important;
  overflow-y: auto !important;
  padding: 26px !important;
}

.settings-section {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #e7edf6;
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.settings-section-head h3 {
  margin: 0;
  color: #1b2a40;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.settings-section-head p {
  margin: 4px 0 0;
  color: #738196;
  font-size: 13px;
  line-height: 1.5;
}

.settings-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7a8798;
  background: #f1f4f8;
  font-size: 12px;
  font-weight: 650;
}

.settings-status.connected {
  color: #216c4a;
  background: #eaf8f0;
}

.settings-source {
  color: #8190a3;
  font-size: 12px;
  line-height: 1.4;
}

.settings-form {
  display: grid;
  gap: 9px;
}

.settings-form select,
.settings-form input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 1px solid #d8e3f4;
  border-radius: 12px;
  padding: 0 12px;
  color: #172033;
  background: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.settings-form select:focus,
.settings-form input:focus {
  border-color: #6a9ce8;
  box-shadow: 0 0 0 3px rgba(74, 128, 211, .14);
}

.settings-label {
  margin-top: 2px;
  color: #58697f;
  font-size: 12px;
  font-weight: 650;
}

.settings-help {
  margin: -2px 0 2px;
  color: #8b98a9;
  font-size: 12px;
  line-height: 1.45;
}

.wechat-qr-stage {
  display: grid;
  min-height: 228px;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid #d9e6f8;
  border-radius: 18px;
  background: #f7faff;
  text-align: center;
}

.wechat-qr-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  max-width: 260px;
  color: #6f7f95;
  font-size: 12px;
  line-height: 1.5;
}

.wechat-qr-placeholder strong {
  color: #21334d;
  font-size: 15px;
}

.wechat-qr-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #bcd4f5;
  border-radius: 16px;
  color: #2167c8;
  background: #fff;
}

.wechat-qr-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #2167c8;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.wechat-qr-image {
  display: block;
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.wechat-qr-hint {
  min-height: 18px;
  color: #718198;
  font-size: 12px;
  line-height: 1.45;
}

.wechat-steps {
  margin-top: 0 !important;
}

.wechat-actions {
  justify-content: flex-start;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.settings-actions button {
  height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  color: #fff;
  background: #2167c8;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.settings-actions button.secondary {
  border: 1px solid #c9d9ef;
  color: #2167c8;
  background: #f6faff;
}

.settings-actions button.text-button {
  margin-left: auto;
  border: 0;
  color: #728196;
  background: transparent;
  font-weight: 550;
}

.settings-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.agent-status-row {
  flex-wrap: wrap !important;
}

@media (max-width: 560px) {
  .settings-card {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .settings-section-head {
    gap: 8px;
  }

  .settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .settings-actions button:first-child {
    grid-column: 1 / -1;
  }

  .settings-actions button.text-button {
    margin-left: 0;
  }
}

/* 20260903 share QR and feedback center. */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 31, 52, .32);
}

.feedback-modal.hidden {
  display: none;
}

.feedback-card {
  position: relative;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88dvh, 820px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #d7e3f3;
  border-radius: 24px;
  color: #1d2c42;
  background: #fbfdff;
  box-shadow: 0 24px 70px rgba(22, 54, 102, .22);
}

.feedback-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #6b7b91;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.feedback-eyebrow {
  margin-bottom: 7px;
  color: #3979d2;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}

.feedback-card h2 {
  margin: 0;
  padding-right: 36px;
  color: #172842;
  font-size: 22px;
  line-height: 1.3;
}

.feedback-muted {
  color: #77869a;
  font-size: 13px;
  line-height: 1.55;
}

.feedback-card > .feedback-muted {
  margin: 8px 0 18px;
}

.share-qr-stage {
  display: grid;
  min-height: 280px;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid #dce8f7;
  border-radius: 18px;
  background: #f6faff;
}

.share-qr-stage img {
  display: block;
  width: min(280px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.feedback-status {
  min-height: 20px;
  color: #63748b;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.feedback-actions button,
.feedback-form > button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #2167c8;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.feedback-actions button.secondary {
  border: 1px solid #c9d9ef;
  color: #2167c8;
  background: #f7fbff;
}

.feedback-form {
  display: grid;
  gap: 10px;
}

.feedback-form input,
.feedback-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d7e3f2;
  border-radius: 12px;
  padding: 10px 12px;
  color: #1b2b43;
  background: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.feedback-form input {
  height: 42px;
}

.feedback-form textarea {
  resize: vertical;
  line-height: 1.55;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
  border-color: #6a9ce8;
  box-shadow: 0 0 0 3px rgba(74, 128, 211, .14);
}

.admin-feedback-card {
  width: min(980px, calc(100vw - 32px));
}

.admin-feedback-layout {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.5fr);
  gap: 16px;
  margin-top: 20px;
}

.admin-feedback-list {
  display: flex;
  min-height: 240px;
  max-height: 58dvh;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.admin-feedback-item {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #d8e4f3;
  border-radius: 14px;
  color: #24364f;
  background: #f8fbff;
  text-align: left;
  cursor: pointer;
}

.admin-feedback-item.active {
  border-color: #75a5e8;
  background: #edf5ff;
  box-shadow: 0 0 0 2px rgba(76, 131, 214, .1);
}

.admin-feedback-item strong,
.admin-feedback-item span,
.admin-feedback-item p {
  display: block;
}

.admin-feedback-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-item span,
.admin-feedback-item p {
  margin-top: 5px;
  color: #77869a;
  font-size: 12px;
  line-height: 1.45;
}

.admin-feedback-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-feedback-detail {
  min-width: 0;
  min-height: 300px;
  padding: 16px;
  border: 1px solid #dce7f5;
  border-radius: 16px;
  background: #fff;
}

.feedback-thread-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8eef7;
}

.feedback-thread-meta strong {
  font-size: 14px;
}

.feedback-thread-meta span {
  color: #77869a;
  font-size: 12px;
}

.feedback-thread-messages {
  display: grid;
  max-height: 34dvh;
  gap: 10px;
  overflow: auto;
  padding: 14px 0;
}

.feedback-message {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}

.feedback-message.user {
  justify-self: start;
  background: #f1f5fa;
}

.feedback-message.admin {
  justify-self: end;
  color: #173967;
  background: #e9f2ff;
}

.feedback-message span {
  display: block;
  margin-bottom: 4px;
  color: #74859a;
  font-size: 11px;
}

.feedback-message p {
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 680px) {
  .feedback-card {
    width: calc(100vw - 20px);
    padding: 22px 18px;
    border-radius: 20px;
  }

  .admin-feedback-layout {
    grid-template-columns: 1fr;
  }

  .admin-feedback-list {
    max-height: 28dvh;
    min-height: 0;
  }

  .admin-feedback-detail {
    min-height: 260px;
  }
}

/* Keep the composer on one row when the drawer is open. */
@media (min-width: 861px) {
  .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) max-content 44px 44px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .composer-provider { justify-self: end !important; min-width: 0 !important; }
  .composer-provider-btn { white-space: nowrap !important; }
  .voice-btn, #sendBtn { justify-self: end !important; }
}

/* 20260901 workbench-layout: stop cards from flex-shrinking into each other. */
.agent-panel {
  gap: 14px !important;
  clip-path: inset(0 round 24px 0 0 24px) !important;
  contain: paint !important;
}

.agent-card,
.agent-task-card {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: hidden !important;
}

.agent-suggestions,
.task-list {
  flex: 0 0 auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.agent-suggestion {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.agent-form {
  flex: 0 0 auto !important;
}

.agent-form button {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

@media (max-width: 860px) {
  .agent-panel {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    clip-path: inset(0 round 24px 0 0 24px) !important;
    padding-top: 0 !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }

  .agent-panel > * {
    flex: none !important;
  }

  .agent-panel > * + * {
    margin-top: 12px !important;
  }

  .agent-panel-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin: 0 -14px !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px 12px !important;
    border-bottom: 1px solid rgba(211, 225, 244, .72) !important;
    background: rgba(249, 252, 255, .98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .agent-panel-head + * {
    margin-top: 12px !important;
  }

  .agent-card {
    display: block !important;
    padding: 12px !important;
  }

  .agent-card > * + * {
    margin-top: 9px !important;
  }

  .agent-card-heading + .agent-suggestions {
    margin-top: 10px !important;
  }

  .agent-suggestions {
    display: grid !important;
    gap: 9px !important;
  }

  .agent-suggestion {
    display: block !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
  }

  .agent-suggestion strong {
    margin-bottom: 5px !important;
    line-height: 1.25 !important;
  }

  .agent-suggestion span,
  .agent-empty {
    line-height: 1.55 !important;
  }

  .agent-form {
    display: grid !important;
    gap: 10px !important;
  }

  .agent-form button {
    width: 100% !important;
    height: 42px !important;
    margin: 4px 0 0 !important;
  }

  .agent-task-card {
    margin-top: 14px !important;
  }

  .task-list {
    display: grid !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }
}

.app-shell.agent-panel-collapsed .agent-panel {
  display: none !important;
}

.app-shell:not(.agent-panel-collapsed) .agent-dock-btn {
  display: none !important;
}

@media (max-width: 860px) {
  .app-shell.agent-panel-collapsed .agent-dock-btn {
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* 20260901 voice-keyboard-placement-final: desktop press-to-talk keeps keyboard as a compact right control. */
@media (min-width: 861px) {
  .app-shell.voice-mode .composer-main,
  .app-shell.voice-recording .composer-main {
    display: grid !important;
    grid-template-columns: 52px minmax(160px, 1fr) 52px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }

  .app-shell.voice-mode .plus-btn,
  .app-shell.voice-recording .plus-btn {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  .app-shell.voice-mode .voice-btn,
  .app-shell.voice-recording .voice-btn {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .app-shell.voice-mode .voice-keyboard-btn,
  .app-shell.voice-recording .voice-keyboard-btn {
    grid-column: 3 !important;
    justify-self: center !important;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 44px !important;
  }
}

/* 20260901-agent-panel-clip-and-voice-cancel: keep workbench content inside panel and make cancel explicit. */
.agent-panel {
  overflow: hidden auto !important;
  overscroll-behavior: contain !important;
  clip-path: inset(0 round 24px 0 0 24px) !important;
}

.agent-panel-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: rgba(249, 252, 255, .98) !important;
}

.voice-hold-sheet.cancelled .voice-hold-card,
.app-shell.voice-recording .voice-hold-sheet.cancelled .voice-hold-card {
  border-color: rgba(239, 68, 68, .38) !important;
  background: rgba(255, 241, 242, .98) !important;
  box-shadow: 0 16px 36px rgba(185, 28, 28, .18) !important;
}

.voice-hold-sheet.cancelled .voice-hold-text {
  color: #c0262d !important;
  font-weight: 800 !important;
}

.voice-hold-sheet.cancelled .voice-hold-wave i {
  background: #ef4444 !important;
}

.app-shell.voice-recording .voice-btn.cancelled,
.app-shell.voice-recording .voice-btn.cancelled .voice-btn-label,
.app-shell.voice-recording .voice-mode-caption {
  color: #c0262d !important;
}

/* 20260901-workbench-overlap-reminder-form: no sticky header, readable reminder draft box. */
.agent-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 18px !important;
  scroll-padding-top: 18px !important;
  background: #f9fcff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.agent-panel-head {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
}

.agent-panel > .agent-card,
.agent-panel > .agent-connection {
  position: relative !important;
  z-index: 1 !important;
}

.agent-form textarea#taskContentInput {
  min-height: 128px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  resize: vertical !important;
  line-height: 1.48 !important;
}

@media (min-width: 861px) {
  .agent-panel {
    padding-top: 20px !important;
  }
}

/* 20260901-workbench-final-pass: content scrolls away cleanly; header no longer pierces through. */
.agent-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  contain: paint !important;
  clip-path: inset(0 round 24px 0 0 24px) !important;
}

.agent-panel-head,
.agent-panel .agent-panel-head {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

.agent-form textarea#taskContentInput {
  min-height: 132px !important;
  max-height: 230px !important;
  overflow-y: auto !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

.agent-form textarea#taskContentInput.expanded {
  min-height: 260px !important;
  max-height: 48vh !important;
}

.agent-form .agent-secondary-btn {
  height: 34px !important;
  border: 1px solid rgba(197, 216, 243, .95) !important;
  border-radius: 12px !important;
  color: #2167c8 !important;
  background: #f7fbff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.app-shell.voice-recording .composer-main:has(.voice-btn.cancelled) {
  background: linear-gradient(135deg, rgba(255, 228, 230, .98), rgba(254, 202, 202, .96)) !important;
  border-color: rgba(239, 68, 68, .78) !important;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, .13), 0 12px 30px rgba(185, 28, 28, .18) !important;
}

.app-shell.voice-recording .voice-btn.cancelled,
.app-shell.voice-recording .voice-btn.cancelled.active,
.app-shell.voice-recording .voice-btn.cancelled[aria-pressed="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: rgba(255,255,255,.62) !important;
  box-shadow: 0 0 0 7px rgba(239, 68, 68, .16), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.app-shell.voice-recording .voice-btn.cancelled .voice-btn-label,
.app-shell.voice-recording .voice-btn.cancelled .voice-mode-caption {
  color: #fff !important;
}

.app-shell.voice-recording.voice-cancelled .composer-main {
  background: linear-gradient(135deg, rgba(255, 228, 230, .98), rgba(254, 202, 202, .96)) !important;
  border-color: rgba(239, 68, 68, .78) !important;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, .13), 0 12px 30px rgba(185, 28, 28, .18) !important;
}

.app-shell.voice-recording:not(.voice-cancelled) .voice-btn,
.app-shell.voice-recording:not(.voice-cancelled) .voice-btn .voice-btn-label,
.app-shell.voice-recording:not(.voice-cancelled) .voice-btn .voice-mode-caption {
  color: #fff !important;
}

/* 20260901 final pass: readable voice bar, explicit cancel state, and less dock overlap. */
@media (min-width: 861px) {
  .app-shell:not(.sidebar-collapsed) .main-shell {
    padding-bottom: 148px !important;
  }

  .app-shell:not(.sidebar-collapsed) .chat {
    padding-bottom: 156px !important;
  }

  .agent-dock-btn {
    right: 18px !important;
    bottom: calc(88px + var(--leo-fixed-bottom-inset, 0px)) !important;
  }
}

.app-shell.voice-mode .composer-main,
.app-shell.voice-recording .composer-main {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 8px !important;
}

.app-shell.voice-mode .voice-btn,
.app-shell.voice-recording .voice-btn {
  white-space: nowrap !important;
  min-width: 0 !important;
}

.app-shell.voice-recording:not(.voice-cancelled) .voice-btn,
.app-shell.voice-recording:not(.voice-cancelled) .voice-btn .voice-btn-label,
.app-shell.voice-recording:not(.voice-cancelled) .voice-btn .voice-mode-caption {
  color: #17375f !important;
}

.app-shell.voice-recording:not(.voice-cancelled) .voice-btn {
  background: rgba(241, 246, 255, .98) !important;
  border: 1px solid rgba(145, 182, 230, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.app-shell.voice-recording:not(.voice-cancelled) .voice-btn::after {
  background: #2f7cf6 !important;
}

.app-shell.voice-recording.voice-cancelled .composer-main {
  background: linear-gradient(135deg, rgba(255, 232, 234, .99), rgba(255, 205, 210, .97)) !important;
  border-color: rgba(220, 38, 38, .78) !important;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, .16), 0 12px 30px rgba(185, 28, 28, .18) !important;
}

.app-shell.voice-recording.voice-cancelled .voice-btn,
.app-shell.voice-recording.voice-cancelled .voice-btn.cancelled,
.app-shell.voice-recording.voice-cancelled .voice-btn[aria-pressed="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, #f87171, #dc2626) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  box-shadow: 0 0 0 7px rgba(239, 68, 68, .18), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.app-shell.voice-recording.voice-cancelled .voice-btn .voice-btn-label,
.app-shell.voice-recording.voice-cancelled .voice-btn .voice-mode-caption {
  color: #fff !important;
}

@media (max-width: 860px) {
  .main-shell {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }

  .chat {
    padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
  }

  .agent-dock-btn {
    right: 12px !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    z-index: 140 !important;
  }

  .agent-panel {
    top: 64px !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    height: auto !important;
  }

  .app-shell.agent-panel-collapsed .agent-dock-btn {
    display: inline-flex !important;
  }
}

/* 20260903 mobile account-menu clearance: keep account actions above bottom browser/app controls. */
@media (max-width: 860px) {
  .account-menu,
  .app-shell:not(.sidebar-collapsed) .account-menu {
    position: fixed !important;
    left: max(24px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: min(356px, calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    z-index: 260 !important;
    border-right: 1px solid #e5edf8 !important;
    box-shadow: 0 18px 46px rgba(25, 57, 105, .15), 1px 0 0 #e5edf8 !important;
  }

  .mobile-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 54px !important;
    align-items: center !important;
  }

  .mobile-brand,
  .app-shell.sidebar-collapsed .mobile-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .mobile-logo,
  .mobile-brand .mobile-logo,
  .mobile-brand > span,
  .mobile-brand > span:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1d2c42 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
}