/* Qura MAX.2 composer-only trial
   Source: qura-max-0.2.0-max.2
   Loaded after qura-ui.css so only the chat composer is changed. */

.chat-view .composer-card{
  position:fixed;
  z-index:50;
  left:0;
  right:0;
  margin:0 auto;
  bottom:calc(var(--keyboard-inset,0px) + 8px + env(safe-area-inset-bottom));
  width:min(calc(100% - 24px),calc(var(--chat-w) - 32px));
  box-shadow:none;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 46px;
  grid-template-areas:
    "banner banner banner"
    "chips chips chips"
    "motor ais send"
    "attach text send";
  align-items:center;
  column-gap:4px;
  row-gap:0;
  padding:6px 6px 6px 4px;
  background:var(--surface);
  backdrop-filter:none;
  border:1px solid var(--hairline-strong,var(--hairline));
  border-radius:22px;
  transition:border-color .15s var(--ease);
}

.chat-view .composer-card:focus-within{
  border-color:var(--copper);
  box-shadow:none;
}

.chat-view .composer-card .composer-actions{display:contents}

.chat-view .composer-card>textarea,
.chat-view #composer{
  grid-area:text;
  align-self:stretch;
  field-sizing:content;
  min-height:36px;
  max-height:38vh;
  resize:none;
  padding:4px 6px 6px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  line-height:1.45;
  font-size:15px;
  overflow-y:auto;
}

.chat-view .composer-card>textarea:focus,
.chat-view #composer:focus{
  box-shadow:none;
  border:0;
}

.chat-view .composer-card .chip-wrap{
  grid-area:chips;
  padding:4px 4px 6px;
}
.chat-view .composer-card .chip-wrap:empty{display:none}

.chat-view #composerEditBanner{
  grid-area:banner;
  margin:0 0 6px 4px;
}

.chat-view .composer-actions #motorPickerBtn{
  grid-area:motor;
  align-self:end;
}

.chat-view .composer-actions #attachBtn{
  grid-area:attach;
  align-self:start;
}

.chat-view .composer-actions #attachBtn,
.chat-view .composer-motor-button{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:400;
  line-height:1;
}

.chat-view .composer-actions #attachBtn:hover,
.chat-view .composer-motor-button:hover{
  background:var(--surface-2);
  color:var(--text);
}

.chat-view .composer-motor-button svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.chat-view .composer-motor-button.selected{color:var(--copper-hot)}

.chat-view .composer-actions #composerAis{
  grid-area:ais;
  justify-self:start;
  min-height:0;
  margin:2px 0 0 4px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-view .composer-actions #composerAis::before{
  content:"Til ";
  color:var(--faint);
  font-weight:500;
  white-space:pre;
}

.chat-view .composer-actions #sendBtn{
  grid-area:send;
  align-self:end;
  justify-self:center;
  width:42px;
  height:42px;
  min-width:42px!important;
  min-height:42px!important;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  font-size:0;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--muted);
  pointer-events:auto;
  touch-action:manipulation;
}

.chat-view .composer-actions #sendBtn::before{
  content:"";
  width:17px;
  height:17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.chat-view .composer-actions #sendBtn[data-ready="1"]{background:transparent;color:var(--copper-hot);box-shadow:none;filter:none}
.chat-view .composer-actions #sendBtn:hover:not(:disabled){background:transparent;box-shadow:none;filter:none}
.chat-view .composer-actions #sendBtn,.chat-view .composer-actions #sendBtn:focus,.chat-view .composer-actions #sendBtn:focus-visible,.chat-view .composer-actions #sendBtn:active{background:transparent!important;box-shadow:none!important;filter:none!important;outline:0!important}
.chat-view .composer-actions #sendBtn:disabled{
  background:transparent;
  color:var(--faint);
  opacity:1;
}
.chat-view .composer-actions #sendBtn[data-sending="1"]::before{
  animation:qura-pulse .9s ease-in-out infinite;
}

@media (min-width:1024px){
  .chat-view .composer-card{
    left:272px;
    width:min(calc(100% - 272px - 48px),calc(var(--chat-w) - 48px));
  }
}

.chat-view{padding-bottom:calc(var(--composer-height,96px) + 10px + env(safe-area-inset-bottom))!important}
.chat-view .message-list{padding-bottom:0!important}
html:not(.keyboard-open) .chat-view #composer{height:36px!important;min-height:36px!important;max-height:36px!important;overflow-y:hidden}
html.keyboard-open .chat-view .composer-card{
  bottom:calc(var(--keyboard-inset) - env(safe-area-inset-bottom));
  grid-template-columns:32px minmax(0,1fr) 42px;
  grid-template-areas:
    "banner banner banner"
    "chips chips chips"
    "motor text send"
    "attach text send";
  align-items:end;
  padding:2px 4px 2px 2px;
  border-radius:16px;
  column-gap:2px;
  box-shadow:none;
}
html.keyboard-open .chat-view .composer-actions #composerAis{display:none}
html.keyboard-open .chat-view .composer-card>textarea,
html.keyboard-open .chat-view #composer{
  align-self:end;
  min-height:32px;
  max-height:24vh;
  padding:2px 5px 3px;
}
html.keyboard-open .chat-view .composer-actions #motorPickerBtn{
  grid-area:attach;
  align-self:end;
  justify-self:center;
  transform:translateY(-30px);
  z-index:2;
}
html.keyboard-open .chat-view .composer-actions #attachBtn{
  grid-area:attach;
  align-self:end;
  justify-self:center;
  transform:none;
}
html.keyboard-open .chat-view .composer-actions #attachBtn,
html.keyboard-open .chat-view .composer-motor-button{
  width:30px;height:30px;min-width:30px;min-height:30px;
}
html.keyboard-open .chat-view .composer-actions #sendBtn{
  align-self:end;
  width:40px;height:40px;min-width:40px!important;min-height:40px!important;
}