:root{
  --champagne:#FAF7F1;
  --champagne-deep:#F1EADC;
  --marble-a:rgba(178,166,142,0.07);
  --gold:#C9B37E;
  --gold-text:#9c7f47;
  --ink:#2b2620;
  --ink-soft:#6f6656;
  --ink-faint:#9a9080;
  --white-glass-hi:rgba(255,255,255,0.78);
  --white-glass-lo:rgba(255,255,255,0.40);
  --green:#5f8f6c;
  --green-deep:#4c8459;
  --green-text:#3f7350;
  --green-bg:#eaf2ea;
  --red:#b9776a;
  --red-text:#9c5344;
  --red-bg:#f7ece9;
  --terra:#a86656;
  --shadow-card:0 22px 44px -26px rgba(120,100,58,0.30), 0 2px 6px -2px rgba(120,100,58,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--champagne); height:100%;}
body{
  font-family:'Onest',sans-serif;
  color:var(--ink);
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  min-height:100vh;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 900px 500px at 8% -8%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(ellipse 700px 500px at 105% 10%, rgba(255,255,255,0.55), transparent 50%),
    linear-gradient(128deg, transparent 22%, var(--marble-a) 22.4%, transparent 23%),
    linear-gradient(153deg, transparent 39%, var(--marble-a) 39.5%, transparent 40.4%),
    linear-gradient(95deg, transparent 58%, rgba(201,179,126,0.05) 58.6%, transparent 59.6%),
    linear-gradient(142deg, transparent 71%, var(--marble-a) 71.5%, transparent 72.2%),
    linear-gradient(110deg, transparent 84%, rgba(201,179,126,0.06) 84.6%, transparent 85.6%),
    linear-gradient(180deg, var(--champagne), var(--champagne-deep));
  background-color:var(--champagne);
}
body::after{
  content:'';
  position:fixed; inset:0;
  z-index:-1;
  opacity:0.5;
  pointer-events:none;
  background-image:
    linear-gradient(64deg, transparent 30.2%, rgba(255,255,255,0.5) 30.6%, transparent 31.1%),
    linear-gradient(64deg, transparent 61.2%, rgba(150,135,105,0.05) 61.6%, transparent 62.1%);
}
button{font-family:inherit; cursor:pointer;}
input, textarea{font-family:inherit; font-size:14px;}

.btn-gold{
  background:linear-gradient(135deg,#cdb47f,#b9985f);
  border:1px solid #b9985f;
  color:#fff;
  border-radius:20px;
  padding:11px 22px;
  font-weight:600;
  font-size:13.5px;
  box-shadow:0 6px 14px -6px rgba(160,130,70,0.55);
  transition:opacity 0.2s ease;
}
.btn-gold:disabled{ opacity:0.45; cursor:default; box-shadow:none; }
.btn-gold:not(:disabled):hover{ opacity:0.92; }

.link-btn{
  background:none; border:none; color:var(--ink-soft);
  font-size:13px; font-weight:500; text-decoration:underline;
}
.link-btn:hover{ color:var(--ink); }

/* ===== LOGIN ===== */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card{
  width:100%; max-width:380px;
  background:linear-gradient(160deg, var(--white-glass-hi), var(--white-glass-lo));
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(201,179,126,0.32);
  border-radius:20px;
  box-shadow:var(--shadow-card);
  padding:38px 34px;
  position:relative; overflow:hidden;
}
.login-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), #e2cf9f);
}
.login-logo{
  font-family:'Playfair Display',serif;
  font-size:25px; font-weight:600; letter-spacing:0.03em;
  color:var(--ink); text-align:center;
}
.login-logo em{ font-style:italic; font-weight:500; color:var(--gold-text); }
.login-sub{
  text-align:center; font-size:12px; color:var(--ink-faint);
  margin-top:6px; margin-bottom:26px;
}
.field-label{
  display:block; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; margin-bottom:6px; margin-top:16px;
}
#login-form input{
  width:100%; padding:11px 14px;
  border:1px solid rgba(201,179,126,0.4); border-radius:12px;
  background:rgba(255,255,255,0.6); color:var(--ink); outline:none;
}
#login-form input:focus{ border-color:var(--gold); background:rgba(255,255,255,0.9); }
#login-form .btn-gold{ width:100%; margin-top:22px; }
.login-error{ color:#9c5344; font-size:12.5px; margin-top:12px; min-height:16px; text-align:center; }

/* ===== APP SHELL ===== */
.app-shell{ display:flex; flex-direction:column; height:100vh; }
header{
  background:linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.66));
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(201,179,126,0.35);
  padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.logo{ font-family:'Playfair Display',serif; font-size:19px; font-weight:600; letter-spacing:0.03em; color:var(--ink); }
.logo em{ font-style:italic; font-weight:500; color:var(--gold-text); margin:0 2px; }
.logo-sub{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; font-weight:500; }
.header-right{ display:flex; align-items:center; gap:14px; }
.me-badge{
  font-size:12.5px; color:var(--ink-soft); font-weight:500;
  background:rgba(255,255,255,0.6); border:1px solid rgba(201,179,126,0.35);
  padding:6px 14px; border-radius:20px;
}

.chat-body{ display:flex; flex:1; min-height:0; }

/* ===== SIDEBAR ===== */
.sidebar{
  width:300px; flex-shrink:0;
  border-right:1px solid rgba(201,179,126,0.28);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.25);
}
.sidebar-search{ padding:14px 16px 8px; }
.sidebar-search input{
  width:100%; padding:9px 14px;
  border:1px solid rgba(201,179,126,0.4); border-radius:20px;
  background:rgba(255,255,255,0.6); outline:none; font-size:13px; color:var(--ink);
}
.sidebar-search input:focus{ border-color:var(--gold); background:rgba(255,255,255,0.9); }
.conv-list{ flex:1; overflow-y:auto; padding:4px 10px 16px; }
.search-results{ overflow-y:auto; max-height:60%; padding:0 10px 10px; border-bottom:1px solid rgba(201,179,126,0.28); }

.conv-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:14px; cursor:pointer;
  margin-bottom:2px; position:relative;
}
.conv-item:hover{ background:rgba(255,255,255,0.55); }
.conv-item{ position:relative; overflow:hidden; }
.conv-item.active{ background:linear-gradient(160deg, var(--white-glass-hi), var(--white-glass-lo)); box-shadow:var(--shadow-card); }
.conv-item.active::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold), #e2cf9f);
}
.conv-item.pinned{ margin-bottom:10px; border-bottom:1px solid rgba(201,179,126,0.25); border-radius:14px; padding-bottom:13px;}
.conv-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#e2cf9f,#b9985f);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Playfair Display',serif; font-weight:600; font-size:14px;
  position:relative;
}
/* Палитра участников — цвета финансового дашборда (kpi-card/bar-fill) */
.conv-avatar.tone-gold{ background:linear-gradient(135deg,#e2cf9f,#b9985f); }
.conv-avatar.tone-green{ background:linear-gradient(135deg,#a9c7b0,#5f8f6c); }
.conv-avatar.tone-terra{ background:linear-gradient(135deg,#d6ab9c,#a86656); }
.conv-avatar.tone-sand{ background:linear-gradient(135deg,#ddc9a0,#c9a45c); }
.msg-sender.sender-tone-gold{ color:var(--gold-text); }
.msg-sender.sender-tone-green{ color:var(--green-text); }
.msg-sender.sender-tone-terra{ color:var(--red-text); }
.msg-sender.sender-tone-sand{ color:#8a7340; }
.presence-dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink-faint);
  position:absolute; right:-1px; bottom:-1px; border:2px solid var(--champagne);
}
.presence-dot.online{ background:var(--green-deep); box-shadow:0 0 0 2px var(--green-bg); }
.conv-meta{ min-width:0; flex:1; }
.conv-name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-role{ font-size:11px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-preview{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.conv-time{ font-size:10.5px; color:var(--ink-faint); flex-shrink:0; align-self:flex-start; margin-top:2px; }
.unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; }

.search-result-item{ padding:10px 8px; border-bottom:1px solid rgba(201,179,126,0.16); cursor:pointer; }
.search-result-item:hover{ background:rgba(255,255,255,0.5); }
.search-result-conv{ font-size:11px; color:var(--gold-text); font-weight:600; margin-bottom:2px; }
.search-result-body{ font-size:12.5px; color:var(--ink); }
.search-result-meta{ font-size:10.5px; color:var(--ink-faint); margin-top:2px; }

/* ===== MAIN PANEL ===== */
.main-panel{ flex:1; display:flex; flex-direction:column; min-width:0; }
.conv-header{
  padding:16px 28px; border-bottom:1px solid rgba(201,179,126,0.28);
  background:rgba(255,255,255,0.35); flex-shrink:0;
  display:flex; align-items:center; gap:12px;
}
.back-btn{
  display:none;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(201,179,126,0.4);
  border-radius:50%;
  width:36px; height:36px;
  font-size:17px; color:var(--gold-text);
  flex-shrink:0;
}
.conv-title{ font-family:'Playfair Display',serif; font-size:16.5px; font-weight:600; color:var(--ink); }
.conv-subtitle{ font-size:12px; color:var(--ink-faint); margin-top:2px; }

.messages{ flex:1; overflow-y:auto; padding:22px 28px; display:flex; flex-direction:column; gap:14px; }
.msg-row{ display:flex; flex-direction:column; max-width:60%; }
.msg-row.own{ align-self:flex-end; align-items:flex-end; }
.msg-row.other{ align-self:flex-start; align-items:flex-start; }
.msg-sender{ font-size:11px; color:var(--gold-text); font-weight:600; margin-bottom:3px; }
.msg-bubble{
  padding:10px 15px; border-radius:16px; font-size:13.8px; color:var(--ink);
  box-shadow:var(--shadow-card); line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.msg-row.own .msg-bubble{
  background:linear-gradient(160deg, rgba(230,205,148,0.55), rgba(201,179,126,0.30));
  border:1px solid rgba(201,179,126,0.4);
}
.msg-row.other .msg-bubble{
  background:linear-gradient(160deg, var(--white-glass-hi), var(--white-glass-lo));
  border:1px solid rgba(201,179,126,0.25);
}
.msg-time{ font-size:10px; color:var(--ink-faint); margin-top:3px; }

.send-row{ display:flex; gap:12px; padding:16px 28px; border-top:1px solid rgba(201,179,126,0.28); background:rgba(255,255,255,0.35); flex-shrink:0; }
.send-row textarea{
  flex:1; resize:none; border:1px solid rgba(201,179,126,0.4); border-radius:16px;
  padding:11px 16px; background:rgba(255,255,255,0.7); outline:none; color:var(--ink); max-height:120px;
}
.send-row textarea:focus{ border-color:var(--gold); background:#fff; }
.send-row textarea:disabled{ opacity:0.5; }

.empty-state{ color:var(--ink-faint); font-size:13px; text-align:center; margin-top:40px; }

@media (max-width:760px){
  .sidebar{ width:100%; position:absolute; inset:0; z-index:5; background:var(--champagne); }
  .chat-body{ position:relative; }
  .chat-body.mobile-chat-open .sidebar{ display:none; }
  .main-panel{ width:100%; }
  .msg-row{ max-width:82%; }
  .back-btn{ display:block; }
  .conv-header{ padding:12px 16px; }
  .messages{ padding:16px 14px; }
  .send-row{ padding:12px 14px; }
}