/* KalyxAI — dedicated mobile readability fix for /chat */
@media (max-width:900px){
  html,body{height:100%;min-height:100%;overflow:hidden!important}
  body.chat-sidebar-mobile-open{overflow:hidden!important}

  /* Full-height readable chat canvas */
  .chat-shell{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    background:var(--bg)!important;
  }
  .chat-panel{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-width:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--bg)!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  /* Top bar: leave a dedicated area for the history trigger */
  .chat-top{
    min-height:66px!important;
    height:66px!important;
    flex:0 0 66px!important;
    padding:10px 12px 10px 68px!important;
    gap:8px!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent-2) 16%,var(--app-border))!important;
    background:color-mix(in srgb,var(--surface) 96%,var(--bg))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .chat-top>div{min-width:0!important}
  .chat-top .kicker{font-size:8px!important;line-height:1!important;margin:0 0 4px!important;color:var(--muted)!important}
  .chat-top h1{
    max-width:58vw!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:var(--text)!important;
  }
  .secure-pill{
    flex:0 0 auto!important;
    max-width:none!important;
    padding:6px 8px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
    color:var(--muted)!important;
    background:var(--surface)!important;
  }

  /* History button no longer floats over the conversation content */
  .sidebar-mobile-trigger{
    display:grid!important;
    place-items:center!important;
    position:fixed!important;
    z-index:4999!important;
    left:12px!important;
    top:11px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:14px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 35%,var(--app-border))!important;
    background:var(--accent-gradient)!important;
    color:#fff!important;
    font:900 19px/1 inherit!important;
    box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 20%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Messages */
  .messages{
    min-height:0!important;
    flex:1 1 auto!important;
    padding:18px 13px 14px!important;
    scroll-padding-bottom:104px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:var(--bg)!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .message{
    width:100%!important;
    max-width:100%!important;
    gap:10px!important;
    margin:0 0 18px!important;
    color:var(--text)!important;
  }
  .message>div:last-child{min-width:0!important;max-width:calc(100% - 42px)!important}
  .message p{
    margin:0!important;
    font-size:15px!important;
    line-height:1.58!important;
    color:var(--text)!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .message small{font-size:10px!important;color:var(--muted)!important}
  .message .avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    border-radius:11px!important;
  }
  .message .avatar img{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
  }
  .message.user>div:last-child{
    padding:12px 14px!important;
    border-radius:18px 18px 6px 18px!important;
    background:color-mix(in srgb,var(--accent) 13%,var(--surface))!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--app-border))!important;
  }

  /* Composer stays large enough for fingers and mobile keyboards */
  .attachment-tray{margin:0 8px 7px!important;max-height:92px!important;overflow:auto!important}
  .composer{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:60px!important;
    margin:0 8px max(8px,env(safe-area-inset-bottom))!important;
    padding:7px!important;
    gap:6px!important;
    border-radius:20px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 26%,var(--app-border))!important;
    background:var(--surface)!important;
    box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 10%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .composer textarea{
    height:44px!important;
    min-height:44px!important;
    max-height:120px!important;
    padding:10px 4px!important;
    font-size:16px!important;
    line-height:1.4!important;
    color:var(--text)!important;
  }
  .composer textarea::placeholder{color:var(--muted)!important;opacity:.9!important}
  .composer-plus,.composer .button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    padding:0!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
  }
  .composer .button{font-size:0!important}
  .composer .button span{font-size:19px!important;margin:0!important}
  .privacy-line{display:none!important}

  /* Conversation drawer: solid, spacious and almost full-screen */
  body.app-page .chat-sidebar{
    display:flex!important;
    position:fixed!important;
    z-index:5001!important;
    left:8px!important;
    top:8px!important;
    bottom:8px!important;
    width:calc(100vw - 16px)!important;
    max-width:420px!important;
    height:auto!important;
    max-height:calc(100dvh - 16px)!important;
    padding:16px!important;
    gap:12px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 18%,var(--app-border))!important;
    border-radius:24px!important;
    background:var(--bg)!important;
    box-shadow:0 24px 70px rgba(12,7,26,.32)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:hidden!important;
    transform:translateX(calc(-100% - 28px))!important;
  }
  body.chat-sidebar-mobile-open.app-page .chat-sidebar{transform:translateX(0)!important}
  .sidebar-mobile-backdrop{
    background:rgba(10,7,18,.5)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
  }

  .sidebar-heading{
    min-height:54px!important;
    padding:0 48px 12px 0!important;
    border-bottom:1px solid color-mix(in srgb,var(--accent-2) 14%,var(--app-border))!important;
  }
  .sidebar-heading-main{gap:10px!important}
  .sidebar-heading-icon{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important}
  .sidebar-heading .kicker{font-size:8px!important;margin-bottom:4px!important}
  .sidebar-heading h2{
    margin:0!important;
    font-size:20px!important;
    line-height:1.1!important;
    color:var(--text)!important;
  }
  .sidebar-heading-actions{width:auto!important;min-width:0!important;gap:6px!important}
  .sidebar-heading-actions .mcp-chat-link,.sidebar-heading-actions .new-chat-icon{display:none!important}
  .sidebar-collapse-toggle{
    position:absolute!important;
    right:0!important;
    top:0!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    border-radius:13px!important;
  }

  .chat-history{
    min-height:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    padding:10px!important;
    border-radius:18px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 14%,var(--app-border))!important;
    background:var(--surface)!important;
    overflow:hidden!important;
  }
  .history-heading{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:2px 3px 8px!important;
    font-size:11px!important;
    font-weight:850!important;
    line-height:1.2!important;
    letter-spacing:.05em!important;
    color:var(--text)!important;
  }
  .history-retention-hint{font-size:9px!important;color:var(--muted)!important;white-space:nowrap!important}
  .history-list{
    min-height:0!important;
    flex:1 1 auto!important;
    display:grid!important;
    align-content:start!important;
    gap:7px!important;
    padding:0 2px 3px 0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .history-item{
    width:100%!important;
    min-height:58px!important;
    padding:11px 12px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 13%,var(--app-border))!important;
    border-radius:14px!important;
    background:var(--bg)!important;
    color:var(--text)!important;
    box-shadow:none!important;
  }
  .history-item:active,.history-item.active,.history-item[aria-current="true"]{
    border-color:color-mix(in srgb,var(--accent-2) 45%,var(--app-border))!important;
    background:color-mix(in srgb,var(--accent-2) 8%,var(--bg))!important;
  }
  .history-title{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:14px!important;
    font-weight:750!important;
    line-height:1.3!important;
    color:var(--text)!important;
  }
  .history-date{
    display:block!important;
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.2!important;
    color:var(--muted)!important;
  }
  .history-empty{
    padding:20px 14px!important;
    border-radius:14px!important;
    font-size:13px!important;
    line-height:1.5!important;
    color:var(--muted)!important;
    background:var(--bg)!important;
  }

  /* Account block is kept compact so history gets most of the screen */
  .sidebar-account-controls{
    flex:0 0 auto!important;
    gap:7px!important;
    padding-top:10px!important;
    border-top:1px solid color-mix(in srgb,var(--accent-2) 14%,var(--app-border))!important;
  }
  .account-control-row{display:none!important}
  .sidebar-account-controls .chat-profile{grid-template-columns:38px 38px minmax(0,1fr)!important;gap:7px!important}
  .sidebar-account-controls .chat-profile-avatar{width:38px!important;height:38px!important}
  .sidebar-account-controls .chat-profile-button{width:38px!important;height:38px!important}
  .sidebar-account-controls .chat-logout-button{height:38px!important;font-size:11px!important}
  .sidebar-login{min-height:42px!important}
  .admin-entry{display:none!important}

  /* Long-press actions become a mobile bottom sheet */
  .history-context-menu:not([hidden]){
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:68dvh!important;
    overflow-y:auto!important;
    padding:10px!important;
    border:1px solid color-mix(in srgb,var(--accent-2) 20%,var(--app-border))!important;
    border-radius:20px!important;
    background:var(--surface)!important;
    box-shadow:0 24px 70px rgba(10,7,20,.35)!important;
  }
  .history-context-menu button{
    width:100%!important;
    min-height:46px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    font-size:13px!important;
    text-align:left!important;
  }
  .history-context-menu>span{display:block!important;padding:10px 12px 6px!important;font-size:10px!important;color:var(--muted)!important}

  .conversation-modal{padding:12px!important}
  .conversation-modal-card{
    width:100%!important;
    max-width:430px!important;
    padding:22px 18px!important;
    border-radius:20px!important;
    background:var(--surface)!important;
  }
}

@media (max-width:520px){
  .secure-pill{display:none!important}
  .chat-top h1{max-width:calc(100vw - 94px)!important}
  body.app-page .chat-sidebar{max-width:none!important}
}

@media (max-width:380px){
  .chat-top{padding-left:62px!important}
  .sidebar-mobile-trigger{left:9px!important;width:42px!important;height:42px!important;min-width:42px!important}
  .messages{padding-inline:10px!important}
  .composer{margin-inline:6px!important}
}