/* SNS AI STUDIO - FRIENDLY AI OFFICE V3 */

:root{
  --bg:#f5f0e8;
  --bg2:#fbf8f2;
  --surface:#fffdf9;
  --surface2:#f4eee4;
  --text:#203129;
  --text2:#58675f;
  --line:#ded9cf;

  --green:#287656;
  --green2:#4ea97e;
  --mint:#dff3e8;
  --mint2:#a8e6c8;

  --warm:#e4a96f;
  --gold:#e8bf69;

  --radius:20px;
  --shadow:0 12px 34px rgba(37,50,42,.08);
}

/* ---------- PAGE SIZE ---------- */

html,
body{
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  background:var(--bg) !important;
}

body{
  color:var(--text) !important;
  background:
    radial-gradient(circle at 90% 4%,rgba(112,199,154,.13),transparent 28%),
    radial-gradient(circle at 8% 92%,rgba(229,169,111,.12),transparent 28%),
    linear-gradient(135deg,#f8f3ea,#f3eee6 55%,#f6f3eb) !important;
}

*{
  box-sizing:border-box;
}

#app{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:100dvh !important;
  color:var(--text) !important;
  opacity:1 !important;
  filter:none !important;
}

/* common app containers */

#app .app,
#app .shell,
#app .app-shell,
#app .layout,
#app .workspace{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* ---------- TOP BAR ---------- */

#app header,
#app .header,
#app .topbar{
  min-height:68px !important;
  background:rgba(255,252,247,.94) !important;
  border-bottom:1px solid rgba(46,82,65,.11) !important;
  color:var(--text) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 2px 16px rgba(30,45,37,.035) !important;
}

#app header *,
#app .header *,
#app .topbar *{
  color:var(--text) !important;
}

/* ---------- SIDEBAR ---------- */

#app aside,
#app .sidebar,
#app .side{
  width:218px !important;
  min-width:218px !important;
  flex:0 0 218px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,252,247,.98),
      rgba(244,239,230,.98)
    ) !important;

  color:var(--text) !important;

  border-right:
    1px solid rgba(49,79,65,.11) !important;

  box-shadow:
    7px 0 24px rgba(38,53,45,.025) !important;

  overflow-x:hidden !important;
}

/* sidebar menu readability */

#app aside a,
#app aside button,
#app .sidebar a,
#app .sidebar button,
#app .side a,
#app .side button{
  color:#26382f !important;
  font-size:15px !important;
  font-weight:700 !important;

  min-height:48px !important;
  width:calc(100% - 20px) !important;

  margin:4px 10px !important;
  padding:11px 14px !important;

  border:1px solid transparent !important;
  border-radius:14px !important;

  background:transparent !important;

  display:flex !important;
  align-items:center !important;
  gap:11px !important;

  text-align:left !important;
  justify-content:flex-start !important;
}

/* selected nav */

#app aside a.active,
#app aside button.active,
#app aside [aria-current="page"],
#app .sidebar a.active,
#app .sidebar button.active,
#app .sidebar [aria-current="page"],
#app .side a.active,
#app .side button.active,
#app .side [aria-current="page"]{
  color:#164c34 !important;

  background:
    linear-gradient(
      135deg,
      #dff3e8,
      #eaf7f0
    ) !important;

  border-color:rgba(51,134,95,.12) !important;

  box-shadow:
    inset 3px 0 0 #4aa77c !important;
}

#app aside a:hover,
#app aside button:hover,
#app .sidebar a:hover,
#app .sidebar button:hover,
#app .side a:hover,
#app .side button:hover{
  color:#15472f !important;
  background:rgba(68,151,108,.075) !important;
}

/* ---------- MAIN CONTENT ---------- */

#app main,
#app .main,
#app .content,
#app .page,
#app .main-content{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  padding:
    clamp(20px,2.2vw,34px) !important;

  color:var(--text) !important;

  background:
    radial-gradient(circle at 88% 3%,rgba(101,188,145,.07),transparent 25%),
    transparent !important;
}

/* ---------- TYPOGRAPHY ---------- */

#app h1{
  color:#203028 !important;
  font-size:clamp(30px,3vw,42px) !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
}

#app h2{
  color:#203028 !important;
  font-weight:850 !important;
}

#app h3,
#app h4{
  color:#26372f !important;
  font-weight:800 !important;
}

#app p,
#app label,
#app li,
#app td,
#app small{
  color:#56665e !important;
}

#app .muted,
#app .subtext,
#app .description,
#app .hint{
  color:#718078 !important;
}

/* ---------- CARDS ---------- */

#app .card,
#app .panel,
#app .box,
#app section[class*="card"],
#app div[class*="card"]{
  color:var(--text) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(255,252,247,.92)
    ) !important;

  border:
    1px solid rgba(51,83,68,.105) !important;

  border-radius:
    var(--radius) !important;

  box-shadow:
    var(--shadow) !important;
}

/* ---------- INPUTS ---------- */

#app input,
#app textarea,
#app select{
  color:#22362c !important;

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid rgba(42,84,64,.20) !important;

  border-radius:
    13px !important;
}

#app input::placeholder,
#app textarea::placeholder{
  color:#89968f !important;
}

#app input:focus,
#app textarea:focus,
#app select:focus{
  outline:none !important;

  border-color:
    rgba(64,166,117,.66) !important;

  box-shadow:
    0 0 0 3px rgba(78,169,126,.12) !important;
}

/* ---------- BUTTONS ---------- */

#app button,
#app .btn{
  border-radius:13px !important;
  font-weight:800 !important;
}

#app button.primary,
#app .btn-primary,
#app button[type="submit"]{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #337d5d,
      #52a77f
    ) !important;

  border:
    1px solid rgba(36,108,77,.24) !important;

  box-shadow:
    0 8px 20px rgba(53,124,91,.15) !important;
}

#app button.secondary,
#app .btn-secondary{
  color:#29513f !important;

  background:
    #fffdfa !important;

  border:
    1px solid rgba(47,102,76,.28) !important;
}

/* ---------- SWITCHES ---------- */

#app input[type="checkbox"]{
  accent-color:#3e8c69 !important;
}

/* ---------- TABLES ---------- */

#app table{
  width:100% !important;
  background:#fffdfa !important;
  border-radius:16px !important;
  overflow:hidden !important;
}

#app th{
  color:#254538 !important;
  background:#edf7f1 !important;
}

#app td{
  color:#526159 !important;
}

/* =====================================================
   AI TEAM
   Only the panel is dark.
   NO global dimming.
===================================================== */

#aiOfficeTeamButton{
  right:18px !important;
  bottom:18px !important;

  height:48px !important;

  padding:
    0 16px !important;

  color:#173c2d !important;

  background:
    linear-gradient(
      135deg,
      #c5f5dd,
      #77dcb0
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  border-radius:
    999px !important;

  box-shadow:
    0 12px 30px rgba(38,80,59,.18) !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}

/* panel */

#aiOfficeTeamPanel{
  right:18px !important;
  bottom:76px !important;

  width:min(340px,calc(100vw - 32px)) !important;
  max-height:min(650px,76vh) !important;

  overflow-y:auto !important;

  display:none;

  color:#f7fbf8 !important;

  background:
    linear-gradient(
      160deg,
      rgba(38,42,38,.985),
      rgba(24,36,30,.985)
    ) !important;

  border:
    1px solid rgba(143,220,180,.18) !important;

  border-radius:
    22px !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,.28) !important;
}

/* custom class - avoids collision with old .open */

#aiOfficeTeamPanel.ai-team-open{
  display:block !important;
  animation:aiTeamIn .18s ease-out both;
}

@keyframes aiTeamIn{
  from{
    opacity:0;
    transform:translateY(7px) scale(.985);
  }
  to{
    opacity:1;
    transform:none;
  }
}

#aiOfficeTeamPanel .ai-office-title{
  color:#ffffff !important;
}

#aiOfficeTeamPanel .ai-office-sub{
  color:#bdcac3 !important;
}

#aiOfficeTeamPanel .ai-office-member{
  background:
    rgba(255,255,255,.055) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;
}

#aiOfficeTeamPanel .ai-office-member-name{
  color:#fff !important;
}

#aiOfficeTeamPanel .ai-office-member-state{
  color:#8be6b6 !important;
}

#aiOfficeTeamPanel .ai-office-chief{
  background:
    linear-gradient(
      135deg,
      rgba(106,224,167,.12),
      rgba(239,198,112,.09)
    ) !important;
}

#aiOfficeTeamPanel .ai-office-close{
  color:#e9f0ec !important;
}

/* ---------- MOBILE ---------- */

@media(max-width:900px){

  #app aside,
  #app .sidebar,
  #app .side{
    width:190px !important;
    min-width:190px !important;
    flex-basis:190px !important;
  }

}

@media(max-width:720px){

  #app aside,
  #app .sidebar,
  #app .side{
    width:100% !important;
    min-width:0 !important;
  }

  #app main,
  #app .main,
  #app .content,
  #app .page,
  #app .main-content{
    padding:16px !important;
  }

  #aiOfficeTeamButton{
    right:12px !important;
    bottom:70px !important;
  }

  #aiOfficeTeamPanel{
    right:10px !important;
    bottom:126px !important;
    width:calc(100vw - 20px) !important;
  }

}