:root{
  --ax-bg:#f5f7f8;
  --ax-text:#14323a;
  --ax-muted:#6b7f86;
  --ax-border:#e5e7eb;
  --ax-brand:#016C74;
  --ax-header-h:56px;
  --ax-input-h:76px;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--ax-bg);
  font-family:'Open Sans', Arial, sans-serif;
  overscroll-behavior:none;
}

body{
  position:fixed;
  inset:0;
}

#app{
  position:fixed;
  inset:0;
  overflow:hidden;
  display:flex;
  justify-content:center;
  background:var(--ax-bg);
}

.ax_app{
  position:relative;
  width:100%;
  height:100%;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ax_header{
  flex:0 0 var(--ax-header-h);
  height:var(--ax-header-h);
  padding:6px 8px;
  background:var(--ax-brand);
  color:#fff;
  font-weight:700;
  text-align:center;
  display:grid;
  grid-template-columns:auto minmax(88px, 0.9fr) minmax(0, 1.15fr) minmax(0, 1.15fr) auto;
  align-items:center;
  position:relative;
  column-gap:8px;
}

.ax_header_title{
  grid-column:3 / span 2;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  justify-self:stretch;
  align-self:center;
  padding:0 4px;
}

.ax_header_left{
  grid-column:1 / span 2;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
}

.ax_auth_status{
  min-width:0;
  max-width:min(38vw, 160px);
  color:rgba(255,255,255,0.9);
  font-size:12px;
  font-weight:400;
  line-height:1.05;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.ax_auth_status:empty{
  display:none;
}

.ax_auth_status_icon_mode{
  width:24px;
  height:24px;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
}

.ax_auth_status_icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ax_auth_status_icon_ok{
  color:#7ee787;
}

.ax_auth_status_icon_person{
  color:rgba(255,255,255,0.95);
}

.ax_header_actions{
  grid-column:5;
  display:flex;
  align-items:center;
  gap:0;
  justify-self:end;
}

@media (max-width: 560px){
  .ax_header{
    height:auto;
    min-height:var(--ax-header-h);
    align-items:start;
    padding-top:8px;
    padding-bottom:8px;
    grid-template-columns:auto minmax(72px, 0.75fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap:6px;
  }

  .ax_header_title{
    white-space:normal;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-height:1.08;
    font-size:13px;
  }

  .ax_auth_status{
    max-width:min(30vw, 120px);
    font-size:11px;
  }

  .ax_auth_status_icon_mode{
    width:22px;
    height:22px;
  }

  .ax_auth_status_icon{
    width:16px;
    height:16px;
  }
}

.ax_menu_btn{
  position:static;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  cursor:pointer;
}

.ax_menu_btn span{
  width:22px;
  height:2px;
  border-radius:2px;
  background:#fff;
}

.ax_new_chat_btn{
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#fff;
  cursor:pointer;
}

.ax_new_chat_btn:hover,
.ax_new_chat_btn:focus-visible{
  background:rgba(255,255,255,0.14);
  outline:none;
}

.ax_session_nav_btn{
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#fff;
  cursor:pointer;
}

.ax_session_nav_btn:hover,
.ax_session_nav_btn:focus-visible{
  background:rgba(255,255,255,0.14);
  outline:none;
}

.ax_session_nav_btn:disabled{
  opacity:0.42;
  cursor:default;
  background:transparent;
}

.ax_session_nav_icon{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ax_new_chat_icon{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ax_menu_backdrop{
  position:absolute;
  inset:var(--ax-header-h) 0 0 0;
  z-index:25;
  background:rgba(17,24,39,0.18);
}

.ax_menu_panel{
  position:absolute;
  top:var(--ax-header-h);
  left:0;
  z-index:26;
  width:min(320px, 88vw);
  max-height:calc(100% - var(--ax-header-h));
  overflow:auto;
  background:#fff;
  border-right:1px solid var(--ax-border);
  border-bottom:1px solid var(--ax-border);
  box-shadow:0 12px 32px rgba(0,0,0,0.16);
  padding:14px;
}

.ax_menu_login{
  width:100%;
  border:1px solid var(--ax-border);
  border-radius:8px;
  background:#f9fafb;
  color:var(--ax-text);
  font:inherit;
  font-weight:700;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
}

.ax_menu_logout{
  width:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6b7280;
  font:inherit;
  font-weight:700;
  margin-top:8px;
  padding:9px 12px;
  text-align:left;
  cursor:pointer;
}

.ax_menu_logout:hover{
  background:#f3f4f6;
  color:var(--ax-text);
}

.ax_google_login{
  margin-top:10px;
  min-height:40px;
}

.ax_menu_section{
  margin-top:16px;
}

.ax_menu_section_title{
  color:#fff;
  background:var(--ax-brand);
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0;
  margin-bottom:8px;
  padding:7px 10px;
}

.ax_menu_create_domain{
  width:100%;
  border:1px solid var(--ax-brand);
  border-radius:8px;
  background:#fff;
  color:var(--ax-brand);
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:8px;
  padding:9px 10px;
  text-align:left;
}

.ax_menu_create_domain:hover{
  background:#eff6ff;
}

.ax_menu_list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ax_menu_item,
.ax_menu_empty{
  border:1px solid var(--ax-border);
  border-radius:8px;
  padding:9px 10px;
  color:var(--ax-text);
  background:#fff;
  font-size:14px;
  line-height:1.25;
  text-decoration:none;
}

.ax_menu_empty{
  color:var(--ax-muted);
  background:#f9fafb;
}

.ax_messages{
  position:absolute;
  top:var(--ax-header-h);
  left:0;
  right:0;
  bottom:var(--ax-input-h);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ax_bubble{
  line-height:1.3;
  white-space:pre-wrap;
  word-break:normal;
  overflow-wrap:normal;
}

.ax_user{
  align-self:flex-end;
  max-width:80%;
  padding:12px 14px;
  border-radius:16px;
  background:var(--ax-brand);
  color:#fff;
}

.ax_ai{
  align-self:stretch;
  max-width:100%;
  padding:0;
  background:transparent;
  color:#111827;
  display:block;
}

.ax_separator{
  width:100%;
  height:1px;
  margin:10px 0 6px;
  background:linear-gradient(90deg, transparent 0%, #d1d5db 18%, #d1d5db 82%, transparent 100%);
  opacity:0.9;
}

.ax_typing{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  min-height:24px;
}

.ax_typing_dots{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.ax_typing_text{
  color:#6b7280;
  font-size:14px;
  line-height:20px;
}

.ax_typing_dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d9d9d9;
  animation:ax-typing-bounce 1.2s infinite ease-in-out;
}

.ax_typing_dot:nth-child(1){
  animation-delay:0s;
}

.ax_typing_dot:nth-child(2){
  animation-delay:0.2s;
}

.ax_typing_dot:nth-child(3){
  animation-delay:0.4s;
}

@keyframes ax-typing-bounce{
  0%, 80%, 100%{
    transform:scale(1);
    background:#d9d9d9;
    opacity:0.7;
  }
  40%{
    transform:scale(1.15);
    background:#8f8f8f;
    opacity:1;
  }
}

.ax_input_wrap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:76px;
  border-top:1px solid var(--ax-border);
  padding:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px;
  background:#fff;
  z-index:10;
}

.ax_attachment_list{
  flex:0 0 100%;
  width:100%;
  display:none;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  text-align:right;
}

.ax_attachment_list.ax_has_attachments{
  display:flex;
}

.ax_attachment_name{
  display:block;
  margin-left:auto;
  max-width:100%;
  padding:4px 8px;
  border:1px solid var(--ax-border);
  border-radius:8px;
  color:var(--ax-text);
  background:#f9fafb;
  font-size:12px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
  white-space:nowrap;
}

.ax_file_notice{
  align-self:flex-end;
  max-width:80%;
  padding:12px 14px;
  border-radius:16px;
  background:#f9fafb;
  color:var(--ax-text);
  border:1px solid var(--ax-border);
  text-align:right;
}

.ax_drop_overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(1,108,116,0.12);
  color:var(--ax-brand);
  font-weight:700;
  font-size:3rem;
  text-align:center;
  padding:24px;
  pointer-events:none;
}

.ax_app.ax_drag_over .ax_drop_overlay{
  display:flex;
}

.ax_input{
  flex:1;
  padding:12px;
  border:1px solid var(--ax-border);
  border-radius:16px;
  outline:none;
  resize:none;
  min-height:44px;
  max-height:140px;
  font:inherit;
  line-height:1.45;
  background:#fff;
  color:#111827;
  overflow:hidden;
  -webkit-appearance:none;
  appearance:none;
}

.ax_input:focus{
  border-color:var(--ax-brand);
}

.ax_send_btn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:var(--ax-brand);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.ax_send_btn:active{
  transform:translateY(1px);
}

.ax_send_icon{
  width:24px;
  height:24px;
  fill:white;
}

.ax_image {
  max-width: 100%;
  width: fit-content;
  height: auto;
  border-radius: 10px;
  margin: 0;
  cursor: pointer;
  transition: transform .15s ease;
}

.ax_image:hover {
  transform: scale(1.02);
}

.ax_image_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  overflow: auto;
  z-index: 9999;
  padding: 20px;
}

.ax_image_large {
  display: block;
  margin: auto;
  max-width: none;
  max-height: none;
}

.ax_link {
  display: block;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f6f8;
  color: #222;
  text-decoration: none;
  font-weight: 500;
}

.ax_link:hover {
  background: #e9ecef;
}

.ax_link_title {
  font-weight: 600;
}

.ax_link_url {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
  word-break: break-all;
}

.ax_bullet {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax_bullet li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ax_bullet li:not(:last-child) {
  margin-bottom: 8px;
}

.ax_bullet_marker {
  display: block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  margin-top: 4px;
  background: #111827;
  border-radius: 50%;
  flex: 0 0 8px;
}

.ax_bullet_text {
  display: block;
}

.ax_header_2 {
  align-self: flex-start;
  display: block;
  width: fit-content;
  font-size: 20px;
  font-weight: 600;
  color: #016C74;
  margin-top: 18px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 3px solid #016C74;
}

.ax_header_3 {
  font-size: 18px;
  font-weight: 600;
  color: #016C74;
  margin-top: 10px;
  margin-bottom: 0px;
}

.ax_bold {
  font-weight: 700;
}

.ax_price {
  margin-top: -2px;
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
}

.ax_answer_stats {
  display: grid;
  gap: 1px;
}

.ax_roles_documents {
  margin-top: -2px;
  font-size: 11px;
  color: #9ca3af;
  text-align: left;
}

@media (min-width:900px){
  #app{
    padding:20px 0;
    align-items:center;
  }

  .ax_app{
    height:90vh;
    max-width:650px;
    border-radius:18px;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
  }

  .ax_input{
    overflow:auto;
  }

  .ax_send_btn{
    display:none;
  }
}