/* AGI CHAT • Botanical Edition 2026-10-22
   Visual identity: editorial typography + botanical calm + functional lime.
   Last visual layer; does not change permissions, messages or network behaviour. */
:root {
  --bot-bg:#fafbf5;
  --bot-paper:#fffefa;
  --bot-ink:#20271e;
  --bot-quiet:#8d9985;
  --bot-lime:#d6faa5;
  --bot-lime-bright:#c5f67e;
  --bot-purple:#7057be;
  --bot-line:rgba(122,148,96,.17);
  --bot-shadow:0 9px 30px rgba(73,102,62,.064),0 1px 2px rgba(73,102,62,.025);
}
.workspace {
  background:var(--bot-bg);
  border-color:#e9eee1;
}
.sidebar {
  position:relative;
  isolation:isolate;
  background:#fbfcf6 url('/static/botanical-home.svg') center center / 100% 100% no-repeat;
  border-right:1px solid var(--bot-line);
}
.sidebar>* {position:relative;z-index:1}
.sidebar .side-head {
  flex-shrink:0;
  gap:8px;
  padding:23px 19px 9px;
  align-items:center;
}
.brand-stack {display:flex;flex-direction:column;gap:7px;min-width:0}
.sidebar .brand {font-size:26px;letter-spacing:-1.15px;gap:9px;font-weight:840;white-space:nowrap}
.sidebar .brand-logo {
  flex:none;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  background:#171e18;
  color:var(--bot-lime-bright);
  border-radius:50%;
  font-size:26px;
  font-weight:400;
  box-shadow:0 4px 17px rgba(32,55,25,.1);
}
.sidebar .wordmark-dot {color:#78a934;font-weight:390}
.brand-tagline {
  white-space:nowrap;
  font-size:8.5px;
  letter-spacing:.23em;
  font-weight:760;
  color:#8b9583;
  line-height:1.3;
  padding-left:2px;
}
.brand-tagline span {color:#80b848;font-size:11px;vertical-align:middle}
.sidebar .side-actions {gap:6px;flex-shrink:0}
.sidebar .side-actions .icon-btn {
  width:38px;height:42px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.76);
  color:#54634f;
  background:rgba(240,244,232,.96);
  box-shadow:0 4px 17px rgba(65,80,56,.05);
}
.sidebar .side-actions .icon-btn svg {width:19px;height:19px;stroke-width:2}
.sidebar .side-actions [data-action="new"].brand-primary-action {
  width:43px;height:43px;
  border-radius:16px;
  color:#fff;
  background:var(--bot-purple);
  box-shadow:0 8px 21px rgba(100,75,175,.17);
}
.sidebar .side-actions [data-action="new"].brand-primary-action:hover {background:#644da9;color:#fff}
.sidebar .side-actions [data-action="invite"] {
  color:#53654f;
  background:rgba(242,246,235,.96);
  border-radius:50%;
}
.sidebar .search-wrap {
  flex-shrink:0;
  margin:21px 18px 14px;
  min-height:55px;
  height:55px;
  padding:0 10px 0 16px;
  border:1px solid #fff;
  border-radius:26px;
  background:rgba(255,255,252,.92);
  box-shadow:var(--bot-shadow);
  backdrop-filter:blur(10px);
  color:#66765c;
  gap:12px;
}
.sidebar .search-wrap:focus-within {border-color:#b1d792;box-shadow:0 0 0 3px #b4e48828}
.sidebar .search-wrap>svg {width:21px;height:21px;stroke-width:2}
.sidebar .search-wrap input {font-size:14px;color:var(--bot-ink);width:0}
.sidebar .search-wrap input::placeholder {color:#a19da2}
.search-filter {
  width:35px;height:35px;
  display:grid;
  place-items:center;
  flex:none;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#71816b;
  transition:background .15s ease;
}
.search-filter svg {width:22px;height:22px}
.search-filter svg circle {fill:var(--bot-paper);stroke:currentColor;stroke-width:1.7}
.search-filter:hover,.search-filter.filter-active {background:#e7f5d8;color:#4c742d}
.sidebar .section-label {
  flex-shrink:0;
  padding:19px 19px 10px;
  font-size:10px;
  letter-spacing:.20em;
  color:#778674;
  font-weight:850;
}
.sidebar .section-label strong {
  color:#45672c;
  font-size:12px;
  background:#e9f6d9;
  border-radius:11px;
  padding:7px 10px;
  min-width:31px;
  text-align:center;
}
.sidebar .section-label .icon-btn {
  width:32px!important;height:32px!important;
  background:#edf8e2;
  border-radius:11px;
  color:#526e40;
}
.sidebar .people {
  flex:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:0 17px 2px;
  max-height:min(25vh,210px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#d9e8ce transparent;
}
.sidebar .people .person {
  position:relative;
  flex:none;
  width:100%;
  min-width:0;
  min-height:78px;
  padding:10px 15px;
  display:flex;
  flex-direction:row;
  align-items:center;
  text-align:left;
  gap:14px;
  border:1px solid rgba(255,255,255,.93);
  border-radius:24px;
  background:rgba(255,255,252,.87);
  box-shadow:var(--bot-shadow);
  color:#242b22;
  transition:background .18s,transform .18s;
}
.sidebar .people .person:hover {background:#fff;transform:translateY(-1px)}
.sidebar .people .person:active {transform:scale(.992)}
.sidebar .people .person .avatar {
  width:56px;height:56px;
  font-size:22px;
  border-radius:50%;
}
.sidebar .people .person-name {
  flex:1;
  font-size:15px;
  font-weight:780;
  max-width:none;
  min-width:0;
  color:#222821;
  letter-spacing:-.4px;
}
.person-chevron {
  display:flex;justify-content:center;align-items:center;
  flex:none;color:#879686;
  transform:rotate(180deg);
}
.person-chevron svg {width:20px;height:20px;stroke-width:2.4}
.contacts-empty {
  font-size:12px;
  line-height:1.55;
  background:rgba(255,255,252,.78);
  padding:15px;border-radius:18px;color:#71826b;
}
.sidebar .chats {
  padding:0 15px 10px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#d8e8c6 transparent;
}
.sidebar .chat-item {
  min-height:85px;
  display:flex;
  align-items:center;
  gap:13px;
  margin:1px 0 9px;
  padding:13px 13px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:24px;
  background:rgba(255,255,252,.86);
  box-shadow:var(--bot-shadow);
  transition:background .18s ease,transform .18s ease;
}
.sidebar .chat-item.is-group {background:rgba(232,244,217,.77)}
.sidebar .chat-item:hover,.sidebar .chat-item.selected {background:rgba(233,247,218,.95)}
.sidebar .chat-item:active {transform:scale(.994)}
.sidebar .chat-item .avatar {width:54px;height:54px;font-size:21px;border-radius:50%}
.sidebar .chat-item .avatar.group {
  background:#e5e9dc;
  color:#4c6445;
}
.sidebar .chat-item .avatar.group:before {font-size:31px}
.sidebar .chat-name {
  font-weight:760;
  font-size:15px;
  line-height:1.3;
  letter-spacing:-.35px;
  color:var(--bot-ink);
}
.sidebar .chat-last {
  color:#879183;
  font-size:12px;
  line-height:1.35;
  max-width:100%;
  margin-top:5px;
}
.sidebar .chat-time {font-size:10px;color:#939b8e}
.sidebar .unread {
  color:#25441e;
  background:#d2f89c;
  font-size:11px;
  min-width:23px;height:23px;
  border-radius:50%;
}
.sidebar .side-bottom {
  flex-shrink:0;
  min-height:68px;
  margin:8px 14px 14px;
  padding:10px 11px;
  border-radius:25px;
  background:rgba(255,255,253,.93);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 9px 34px rgba(69,86,57,.08);
  backdrop-filter:blur(16px);
  gap:11px;
}
.sidebar .side-bottom>.avatar {height:48px;width:48px;border-radius:50%}
.sidebar .profile-name {font-size:14px;font-weight:790;color:#20261f;letter-spacing:-.35px}
.sidebar .profile-sub {font-size:11px;color:#8c9688;margin-top:5px}
.sidebar .side-bottom .icon-btn {
  width:34px;height:34px;
  background:#f1f5ea;
  border-radius:50%;
  flex:none;
}
.sidebar .side-bottom .theme-toggle {
  margin-left:auto;
  font-size:21px;
}
.sidebar .push-onboarding {
  box-shadow:var(--bot-shadow);
  background:#f1f8e9;
  border-radius:19px;
}
/* Conversation: botanical illustrations are decorative, not readable content. */
.main {background:#fbfcf6}
.main-header {
  flex-shrink:0;
  height:79px;min-height:79px;
  border-bottom:1px solid var(--bot-line);
  background:rgba(253,254,249,.95);
  backdrop-filter:blur(15px);
  gap:12px;
  padding:0 24px;
}
.main-header .avatar {width:49px;height:49px;border-radius:50%;font-size:19px}
.main-header .header-title {font-size:17px;letter-spacing:-.4px;font-weight:790}
.main-header .header-sub {font-size:12px;color:#889985;margin-top:4px}
.main-header .back-btn,.main-header .header-actions .icon-btn {
  flex:none;
  width:42px;height:42px;
  border-radius:50%;
  background:#fffefc;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 3px 15px rgba(58,80,45,.042);
  color:#4c5946;
}
.main-header .header-actions{gap:8px}
.chat-wall {
  background-color:#fbfcf6;
  background-image:url('/static/botanical-chat.svg'),radial-gradient(ellipse at 95% 8%,#ecf6ddab,transparent 44%),radial-gradient(ellipse at 0% 100%,#edf7dd7d,transparent 53%);
  background-repeat:no-repeat;
  background-size:100% 100%,cover,cover;
  background-position:center;
  padding-top:27px;
}
.chat-wall-inner{max-width:740px}
.chat-wall .msg-row {margin-bottom:16px;gap:10px}
.chat-wall .msg-row .avatar {
  width:33px;height:33px;
  border-radius:50%;
  font-size:12px;
  margin-bottom:15px;
}
.chat-wall .bubble {
  border:1px solid rgba(255,255,255,.96);
  border-radius:20px;
  padding:10px 14px;
  background:#fff;
  color:#252c22;
  box-shadow:0 3px 15px rgba(56,82,45,.05);
  font-size:14px;
  font-weight:430;
  line-height:1.48;
  letter-spacing:-.08px;
}
.chat-wall .mine .bubble {
  background:var(--bot-lime);
  border-color:var(--bot-lime);
  color:#20291b;
  border-radius:20px;
  box-shadow:0 3px 12px rgba(106,141,71,.035);
}
.chat-wall .message-meta {
  margin:4px 4px 0;
  gap:7px;
  font-size:10px;
  opacity:1;
  min-height:20px;
  color:#8d9986;
}
.chat-wall .mine .message-meta {color:#7d9173}
.chat-wall .delivery-status,.chat-wall .delivery-status.is-read {color:#679b41}
.chat-wall .message-menu-trigger {color:#9aa597;opacity:.8}
.chat-wall .date-label {
  padding:6px 12px;
  margin:12px 0 22px;
  background:rgba(239,247,229,.83);
  border:1px solid rgba(219,233,204,.65);
  border-radius:20px;
  color:#788b71;
  font-size:10px;
}
.chat-wall .chat-intro .intro-icon {
  background:#e9f6d7;color:#7baf41;
  border-radius:50%;
}
.composer-area {
  flex-shrink:0;
  border:0;
  background:rgba(251,252,246,.95);
  padding:9px 15px calc(11px + env(safe-area-inset-bottom,0px));
}
.composer-inner {max-width:740px}
.composer {
  min-height:53px;
  align-items:center;
  padding:5px 6px 5px 9px;
  border-radius:30px;
  border:1px solid rgba(223,234,211,.87);
  background:rgba(255,255,254,.96);
  box-shadow:0 4px 25px rgba(69,99,52,.07),inset 0 1px 1px rgba(255,255,255,.9);
}
.composer .icon-btn,.composer .emoji-toggle {
  width:39px;min-width:39px;height:41px;
  color:#586b53;
  border-radius:50%;
}
.composer textarea,.composer textarea:focus {
  padding:4px 4px 4px 6px;
  color:#242c21;
  font-size:16px;
  line-height:1.48;
}
.composer textarea::placeholder {color:#939d90}
.composer .send-btn {
  width:43px;min-width:43px;height:43px;
  border-radius:50%;
  background:#c4f479;
  box-shadow:0 2px 9px rgba(122,171,75,.10);
}
.composer .send-btn svg {width:21px;height:21px}
.composer:focus-within {border-color:#c7e8a3;box-shadow:0 3px 24px rgba(83,116,60,.07),0 0 0 2px #c6eda82a}
.composer-warning {font-size:11px;color:#a84960}
/* Adapt design sensibly to the narrower desktop sidebar. */
@media(min-width:701px) and (max-width:1100px) {
  .sidebar .side-head{padding:21px 14px 9px}
  .sidebar .brand{font-size:22px}
  .sidebar .brand-logo{width:38px;height:38px}
  .sidebar .side-actions{gap:3px}
  .sidebar .side-actions .icon-btn{width:33px;height:37px}
  .sidebar .side-actions [data-action="new"].brand-primary-action{width:37px;height:37px}
  .brand-tagline{font-size:7.5px}
}
@media(max-width:700px){
  html,body {background:#fbfcf6}
  .workspace{background:#fbfcf6}
  .sidebar {
    padding-top:var(--safe-top,0px);
    background-color:#fbfcf6;
    border-right:0;
  }
  .sidebar .side-head{
    min-height:80px;
    padding:14px 17px 8px;
    gap:5px;
  }
  .sidebar .brand-stack{gap:7px}
  .sidebar .brand {font-size:clamp(20px,5.5vw,27px);gap:8px;letter-spacing:-1.4px}
  .sidebar .brand-logo{width:44px;height:44px;font-size:26px}
  .brand-tagline{font-size:clamp(6px,1.55vw,8px);letter-spacing:.20em}
  .sidebar .side-actions{gap:5px}
  .sidebar .side-actions .icon-btn{width:39px;height:41px;min-width:39px;border-radius:50%}
  .sidebar .side-actions [data-action="new"].brand-primary-action{width:43px;height:43px;min-width:43px;border-radius:15px}
  .sidebar .search-wrap {
    margin:13px 17px 11px;
    min-height:54px;height:54px;
    border-radius:27px;
  }
  .sidebar .search-wrap input {font-size:16px}
  .sidebar .section-label {padding:16px 18px 10px}
  .sidebar .people {
    flex:none;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 17px 0;
    gap:9px;
    max-height:min(26vh,200px);
  }
  .sidebar .people .person {min-width:0;width:100%;min-height:77px;padding:10px 15px}
  .sidebar .people .person .avatar {width:55px;height:55px;border-radius:50%}
  .sidebar .people .person-name{font-size:16px}
  .sidebar .chats {padding:0 17px 11px;overflow-y:auto}
  .sidebar .chat-item {min-height:87px;margin:0 0 10px;padding:13px;gap:14px}
  .sidebar .chat-item .avatar {width:55px;height:55px}
  .sidebar .chat-name{font-size:16px}
  .sidebar .chat-last{font-size:13px;max-width:100%}
  .sidebar .chat-time{font-size:11px}
  .sidebar .side-bottom {
    min-height:69px;
    margin:7px 14px calc(11px + env(safe-area-inset-bottom,0px));
    padding:10px 12px;
    border-radius:26px;
  }
  .sidebar .side-bottom>.avatar{width:47px;height:47px}
  .sidebar .profile-name{font-size:15px}
  .sidebar .profile-sub{font-size:11px}
  .sidebar .side-bottom .icon-btn{width:37px;height:37px}
  .main{padding-top:var(--safe-top,0px);background:#fbfcf6}
  .main-header {
    min-height:75px;height:75px;
    padding:0 15px;
    gap:10px;
    background:rgba(255,255,251,.94);
    border-bottom:0;
  }
  .main-header .back-btn {display:flex;width:41px;height:41px;border-radius:50%}
  .main-header .avatar{width:45px;height:45px;border-radius:50%}
  .main-header .header-title{font-size:17px;max-width:43vw}
  .main-header .header-sub{font-size:12px}
  .main-header .header-actions{gap:5px}
  .main-header .header-actions .icon-btn{width:39px;height:39px;border-radius:50%}
  .chat-wall {
    padding:16px 15px 12px;
    background-size:100% 100%,cover,cover;
  }
  .chat-wall .msg-row{max-width:96%;margin-bottom:14px;gap:9px}
  .chat-wall .msg-row .avatar{width:32px;height:32px;margin-bottom:14px}
  .chat-wall .bubble {
    font-size:14px;
    line-height:1.44;
    border-radius:18px;
    padding:9px 13px;
  }
  .chat-wall .mine .bubble{border-radius:18px}
  .chat-wall .message-meta{margin-top:3px;min-height:19px}
  .composer-area {
    padding:7px 12px calc(9px + env(safe-area-inset-bottom,0px));
    border:0;
    background:rgba(251,252,246,.96);
  }
  .composer{min-height:52px;padding:4px 6px 4px 9px;gap:2px}
  .composer .icon-btn,.composer .emoji-toggle{width:37px;min-width:37px;height:42px}
  .composer .send-btn{width:44px;min-width:44px;height:44px}
  .composer textarea,.composer textarea:focus{padding:5px 4px;font-size:16px}
  .typing-indicator{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:375px){
  .sidebar .side-head{padding-left:11px;padding-right:10px}
  .sidebar .brand{font-size:20px;gap:6px}
  .sidebar .brand-logo{width:39px;height:39px}
  .brand-tagline{letter-spacing:.13em;font-size:6px}
  .sidebar .side-actions{gap:3px}
  .sidebar .side-actions .icon-btn{width:34px;min-width:34px;height:37px}
  .sidebar .side-actions [data-action="new"].brand-primary-action{width:38px;min-width:38px;height:38px}
  .main-header{padding-left:8px;padding-right:9px;gap:7px}
  .main-header .header-title{max-width:37vw}
  .main-header .header-actions{gap:2px}
  .main-header .header-actions .icon-btn{width:34px;height:36px}
  .chat-wall{padding-left:9px;padding-right:9px}
  .composer-area{padding-left:8px;padding-right:8px}
}
@media(max-height:660px) and (max-width:700px){
  .sidebar .side-head{min-height:66px;padding-top:6px;padding-bottom:4px}
  .sidebar .search-wrap{margin-top:7px;margin-bottom:5px;min-height:47px;height:47px}
  .sidebar .section-label{padding-top:10px;padding-bottom:6px}
  .sidebar .people{max-height:100px}
  .sidebar .people .person{min-height:67px;padding:6px 12px}
  .sidebar .people .person .avatar{width:49px;height:49px}
  .sidebar .chat-item{min-height:72px;padding:9px}
  .sidebar .side-bottom{min-height:57px;padding:6px 10px}
}
@media(min-width:1101px){
  .workspace{grid-template-columns:386px minmax(0,1fr)}
  .sidebar .side-head{padding-left:18px;padding-right:15px}
}
html[data-theme="dark"]{
  --bot-bg:#172017;--bot-paper:#222c20;--bot-ink:#f1f4ec;
  --bot-quiet:#a2b29a;--bot-line:#324233;
  --bot-shadow:0 6px 25px #02090228;
}
html[data-theme="dark"] .sidebar{background-image:none;background-color:#172017}
html[data-theme="dark"] .main,html[data-theme="dark"] .workspace{background:#172017}
html[data-theme="dark"] .sidebar .brand-tagline{color:#a3b3a0}
html[data-theme="dark"] .sidebar .wordmark-dot{color:#a4d774}
html[data-theme="dark"] .sidebar .search-wrap,
html[data-theme="dark"] .sidebar .people .person,
html[data-theme="dark"] .sidebar .chat-item,
html[data-theme="dark"] .sidebar .side-bottom,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .composer{
  background:#253024;border-color:#364334;color:#ecf2e8;box-shadow:none;
}
html[data-theme="dark"] .sidebar .chat-item.is-group,
html[data-theme="dark"] .sidebar .chat-item.selected,
html[data-theme="dark"] .sidebar .chat-item:hover{background:#2d3c29}
html[data-theme="dark"] .sidebar .person-name,
html[data-theme="dark"] .sidebar .profile-name,
html[data-theme="dark"] .sidebar .chat-name,
html[data-theme="dark"] .main-header .header-title{color:#e8f2e4}
html[data-theme="dark"] .sidebar .chat-last,
html[data-theme="dark"] .sidebar .chat-time{color:#a6b4a1}
html[data-theme="dark"] .sidebar .side-actions .icon-btn{background:#283529;color:#ccdaca;border-color:#354534}
html[data-theme="dark"] .sidebar .side-actions [data-action="new"].brand-primary-action{background:#7560c8;color:#fff}
html[data-theme="dark"] .sidebar .side-bottom .icon-btn{background:#364334;color:#dbebd5}
html[data-theme="dark"] .chat-wall{
  background-image:radial-gradient(ellipse at 95% 7%,#2c42271f,transparent 45%);
  background-color:#171e17;
}
html[data-theme="dark"] .chat-wall .bubble{background:#283529;color:#edf3e8;border-color:#354734}
html[data-theme="dark"] .chat-wall .mine .bubble{background:#a8df78;color:#1d281b;border-color:#a8df78}
html[data-theme="dark"] .chat-wall .message-meta{color:#abbca3}
html[data-theme="dark"] .chat-wall .mine .message-meta{color:#a2ba9a}
html[data-theme="dark"] .composer-area{background:#172017}
html[data-theme="dark"] .composer textarea{color:#eef4e9}
html[data-theme="dark"] .search-filter.filter-active{background:#374d2e}
html[data-theme="dark"] .main-header .back-btn,
html[data-theme="dark"] .main-header .header-actions .icon-btn{background:#293629;border-color:#3b4b38}
@media(prefers-reduced-motion:reduce){
 .sidebar .chat-item,.sidebar .people .person,.sidebar .side-actions .icon-btn{transition:none}
}
/* Final viewport QA: prevent desktop flex overflow and half-visible contact cards. */
@media(min-width:701px) {
  .app {height:100dvh;min-height:0;padding:21px;}
  .workspace {height:calc(100dvh - 42px);max-height:900px;min-height:0;}
  .sidebar .people {max-height:min(25vh,168px);}
}
@media(max-width:700px) {
  .sidebar .people {max-height:min(24vh,166px);}
}
html[data-theme="dark"] .main-header .back-btn,
html[data-theme="dark"] .main-header .header-actions .icon-btn {
  color:#e2eee0;
}
/* Desktop grid tracks must be shrinkable; do not clip composer below viewport. */
@media(min-width:701px){
  .workspace{grid-template-rows:minmax(0,1fr)}
  .workspace .sidebar,.workspace .main{min-height:0;overflow:hidden}
}

/* Final polish: correct dark theme controls and prevent partially clipped contacts. */
html[data-theme="dark"] .main-header .back-btn,
html[data-theme="dark"] .main-header .header-actions .icon-btn{
  background:#293629!important;
  color:#e2eee0!important;
  border-color:#3b4b38!important;
}
@media(min-width:701px){
  .sidebar .people{max-height:min(27vh,185px);}
}
@media(max-width:700px){
  .sidebar .people{max-height:min(26vh,182px);}
}
@media(max-height:660px) and (max-width:700px){
  .sidebar .people{max-height:100px;}
}