/* A single, borderless writing surface. */
.composer {
  width: min(900px, calc(100vw - 148px));
  padding: 18px 22px 13px;
  bottom: 30px;
  border: 0;
  border-radius: 24px;
  background: #242426;
  box-shadow: 0 12px 48px #0004;
}
.composer:focus-within { background: #27272a; }
.composer-top { margin: 0 0 9px; }
.mode { gap: 8px; align-items: center; }
.mode button { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.mode button.active { color: #e5dcfb; background: #38313f; }
.inspire { color: #94919d; font-size: 11px; padding-right: 2px; }
.composer #prompt,
.composer #negative,
.composer #prompt:hover,
.composer #prompt:focus,
.composer #prompt:focus-visible,
.composer #negative:focus,
.composer #negative:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  resize: none;
  border-radius: 0;
}
.composer #prompt {
  display: block;
  padding: 10px 2px 18px;
  width: 100%;
  height: 82px;
  min-height: 82px;
  max-height: 160px;
  color: #e4e3e8;
  font-size: 14px;
  line-height: 1.85;
  scrollbar-width: thin;
  scrollbar-color: #57535f transparent;
}
.composer #prompt::placeholder { color: #87838e; }
.composer-toolbar { gap: 9px; padding: 4px 0 0; }
.composer-toolbar .select {
  border: 0;
  border-radius: 8px;
  background: #303033;
  color: #bcb9c6;
  padding: 7px 9px;
  font-size: 11px;
}
.composer-toolbar #model { color: #d6cbed; background: #34303c; }
.attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #353438;
  color: #d0ccd9;
  font-size: 22px;
}
.attach span { display: none; }
.divider { display: none; }
.settings { font-size: 18px; padding: 3px 5px; color: #98939f; }
.generate {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d4c4f5;
  color: #352944;
  box-shadow: none;
}
.generate #generate-label { display: none; }
.generate > span:last-child { font-size: 24px; font-weight: 400; }
.composer-foot {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 0;
  padding: 8px 4px 0;
  justify-content: center;
  color: #85818e;
  font-size: 10px;
}
.composer-foot > span:first-child { display: none; }
.composer #advanced-body { padding: 17px 2px 4px; }
.composer #negative { padding: 8px 0; font-size: 12px; }
@media(max-width:850px) {
  .composer { width: calc(100vw - 130px); padding: 15px 17px 12px; }
  .composer-toolbar { gap: 6px; }
}
@media(max-width:560px) {
  .composer { width: calc(100vw - 84px); border-radius: 19px; padding: 13px; bottom: 30px; }
  .composer #prompt { font-size: 13px; height: 88px; min-height: 88px; }
  .composer-toolbar { gap: 5px; }
  .composer-toolbar .select { padding: 7px 4px; font-size: 10px; }
  .generate { width: 33px; height: 33px; }
  .inspire { font-size: 9px; }
  .mode button { font-size: 11px; padding: 5px 8px; }
}

.generate { justify-content: center; gap: 0; }

/* Navigation follows Bayin's existing feature areas. */
.app { grid-template-columns: 190px minmax(0,1fr); }
aside { align-items: stretch; padding: 25px 15px; gap: 35px; }
.brand { flex-direction: row; gap: 10px; padding: 0 8px; }
.brand-name { display: block; font-size: 18px; }
.brand small { font-size: 9px; letter-spacing: 1px; }
.nav-label { display: block; font-size: 10px; color: #77727f; padding: 0 12px; }
.nav-label.tools-label { margin-top: 28px; }
.nav button { flex-direction: row; width: 100%; gap: 11px; padding: 11px 12px; margin: 5px 0; font-size: 12px; }
.nav .ico { width: 20px; height: 20px; font-size: 19px; }
.nav .label { display: block; }
.aside-bottom { align-items: stretch; gap: 14px; }
.sidebar-help { text-align: left; color: #8e8997; font-size: 11px; padding: 7px 12px; }
.profile { margin-top: 0; padding: 0 9px; }
.profile-name { font-size: 11px; }
.profile-name small { font-size: 9px; color: #797580; }
.composer { left: calc(190px + (100vw - 190px)/2); width: min(900px,calc(100vw - 250px)); }
@media(max-width:1000px) {
  .app { grid-template-columns: 160px minmax(0,1fr); }
  aside { padding: 24px 10px; }
  .brand { padding: 0; gap: 6px; }
  .brand-name { font-size: 16px; }
  .nav button { padding: 11px 9px; gap: 8px; }
  .composer { left: calc(160px + (100vw - 160px)/2); width: calc(100vw - 200px); }
}
@media(max-width:760px) {
  .app { grid-template-columns: 62px minmax(0,1fr); }
  aside { padding: 22px 5px; align-items: center; gap: 26px; }
  .brand-name,.nav-label,.nav .label,.sidebar-help,.profile-name { display: none; }
  .nav button { width: 46px; min-height: 43px; justify-content: center; padding: 10px; margin: 7px 0; }
  .profile { padding: 0; }
  .composer { left: calc(62px + (100vw - 62px)/2); width: calc(100vw - 84px); }
}

.toolbar-quality{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:11px;color:#aaa6b7}.toolbar-quality[hidden]{display:none!important}.toolbar-quality .select{min-width:52px!important;width:auto!important}.composer-toolbar{flex-wrap:wrap}