/* Sweetpie chat: an immersive three-panel conversation workspace. */
#page-chats {
  --chat-shell: #17161a;
  --chat-rail: #19181c;
  --chat-canvas: #141318;
  --chat-line: rgba(245, 235, 243, .09);
  --chat-text: #f7f3f6;
  --chat-muted: #a39aa4;
  --chat-accent: #dba3c1;
  --chat-accent-soft: rgba(219, 163, 193, .075);
  --chat-user: #302630;
  color: var(--chat-text);
}
body[data-theme=cream] #page-chats {
  --chat-shell: #fff9f7;
  --chat-rail: #fff2ee;
  --chat-canvas: #fffbf9;
  --chat-line: rgba(111, 49, 69, .15);
  --chat-text: #402334;
  --chat-muted: #896f7d;
  --chat-accent: #c95771;
  --chat-accent-soft: rgba(201, 87, 113, .11);
  --chat-user: #f3d8df;
}
body[data-theme=charcoal] #page-chats {
  --chat-shell: #18151d;
  --chat-rail: #1e1a22;
  --chat-canvas: #141219;
  --chat-accent: #ef72bf;
  --chat-accent-soft: rgba(239, 114, 191, .13);
  --chat-user: #572d50;
}

#page-chats .chat-page-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:8px 0 22px; }
#page-chats .chat-page-heading h1 { font-size:clamp(34px,3.4vw,50px); margin:7px 0 5px; }
#page-chats .chat-page-heading p:last-child { margin:0; color:var(--muted); font-size:12px; }
.chat-page-kicker { margin-bottom:7px; white-space:nowrap; color:var(--muted); font-size:11px; letter-spacing:.04em; }
.chat-page-kicker span { color:var(--accent); margin-right:7px; }

#page-chats .chat-app { display:grid; grid-template-columns:210px minmax(0,1fr) 255px; gap:0; height:clamp(620px,calc(100vh - 238px),850px); min-height:620px; border:1px solid var(--chat-line); border-radius:23px; overflow:hidden; background:var(--chat-shell); box-shadow:0 25px 80px rgba(5,3,11,.24); }
#page-chats .chat-list-panel, #page-chats .chat-panel { min-width:0; border:0; border-radius:0; }
#page-chats .chat-list-panel { display:flex; flex-direction:column; padding:23px 12px 16px; border-right:1px solid var(--chat-line); background:var(--chat-rail); }
.chat-list-heading { padding:0 8px 14px; }
.chat-overline { display:block; color:var(--chat-accent); font-size:9px; font-weight:800; letter-spacing:.18em; line-height:1.4; }
#page-chats .chat-list-heading h2 { margin:5px 0 0; font-family:'DM Sans',sans-serif; font-size:21px; font-weight:700; letter-spacing:-.045em; }
.chat-new-button { display:inline-flex; align-items:center; gap:4px; padding:8px 10px; border:1px solid var(--chat-line); border-radius:10px; background:var(--chat-accent-soft); color:var(--chat-accent); font-size:11px; font-weight:700; transition:background .2s, transform .2s; }
.chat-new-button:hover { background:rgba(240,135,186,.24); transform:translateY(-1px); }
.chat-new-button span:first-child { font-size:18px; font-weight:400; line-height:.8; }
#page-chats .chat-list { display:grid; align-content:start; gap:5px; margin-top:4px; overflow-y:auto; min-height:0; }
#page-chats .chat-list > p { padding:14px 10px; color:var(--chat-muted); line-height:1.5; font-size:12px; }
#page-chats .chat-list-item { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 8px; border:1px solid transparent; border-radius:12px; color:var(--chat-text); background:transparent; text-align:left; transition:background .2s,border-color .2s; }
#page-chats .chat-list-item:hover { background:var(--chat-accent-soft); }
#page-chats .chat-list-item.selected { border-color:var(--chat-line); background:var(--chat-accent-soft); }
.chat-list-avatar { flex:0 0 35px; display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:linear-gradient(140deg,#a0537e,#392039); color:#fff; font-family:'Fraunces',serif; font-size:20px; }
.chat-list-details { min-width:0; display:grid; gap:3px; }
.chat-list-details strong, .chat-list-details small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-details strong { font-size:12px; font-weight:700; }
.chat-list-details small { color:var(--chat-muted); font-size:10px; }
.chat-list-note { display:flex; gap:8px; margin:auto 8px 0; padding-top:16px; border-top:1px solid var(--chat-line); color:var(--chat-muted); font-size:10px; line-height:1.45; }
.chat-list-note span:first-child { color:var(--chat-accent); font-size:14px; }

#page-chats .chat-panel { display:flex; flex-direction:column; min-width:0; background:var(--chat-canvas); }
#page-chats .chat-panel-heading { flex:0 0 auto; min-height:81px; padding:12px 20px; border-bottom:1px solid var(--chat-line); background:var(--chat-shell); }
.chat-heading-person { display:flex; align-items:center; gap:11px; min-width:0; }
.chat-heading-avatar { flex:0 0 46px; width:46px; height:46px; overflow:hidden; border-radius:14px; border:1px solid var(--chat-line); background:#542d4b; }
.chat-heading-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 24%; }
#page-chats .chat-panel-heading h2 { margin:1px 0 3px; font-family:'DM Sans',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.03em; }
.chat-presence { display:flex; align-items:center; gap:5px; color:var(--chat-muted); font-size:10px; }
.chat-presence i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#79c999; box-shadow:0 0 0 3px rgba(121,201,153,.12); }
#page-chats .chat-status { flex:0 0 auto; padding:7px 10px; border:1px solid var(--chat-line); border-radius:20px; color:var(--chat-muted); font-size:10px; opacity:1; }
#page-chats .chat-status span { color:var(--chat-accent); margin-right:3px; }
#page-chats .chat-messages { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; display:flex; flex-direction:column; padding:28px clamp(18px,3vw,40px); background:radial-gradient(circle at 60% 12%,var(--chat-accent-soft),transparent 40%),radial-gradient(circle at 10% 80%,rgba(99,70,131,.12),transparent 42%),var(--chat-canvas); }
#page-chats .chat-welcome { width:min(100%,390px); max-width:none; margin:auto; padding:28px 25px; border:1px solid var(--chat-line); border-radius:20px; background:var(--chat-shell); color:var(--chat-muted); opacity:1; box-shadow:0 15px 42px rgba(0,0,0,.08); }
.chat-welcome-sparkle { display:grid; place-items:center; width:47px; height:47px; margin:0 auto 14px; border-radius:15px; background:var(--chat-accent-soft); color:var(--chat-accent); font-size:27px; }
.chat-welcome p { margin:0; font-size:13px; line-height:1.65; }
#page-chats .chat-message { width:fit-content; max-width:min(85%,620px); margin:0 0 19px; padding:15px 18px; border:1px solid var(--chat-line); border-radius:17px 17px 17px 5px; background:var(--chat-shell); box-shadow:0 10px 25px rgba(0,0,0,.08); }
#page-chats .chat-message.from-user { margin-left:auto; border-radius:17px 17px 5px 17px; background:var(--chat-user); }
#page-chats .chat-message-label { margin-bottom:8px; color:var(--chat-accent); font-size:10px; font-weight:800; letter-spacing:.08em; opacity:1; text-transform:uppercase; }
#page-chats .chat-message.from-user .chat-message-label { color:var(--chat-text); opacity:.7; }
#page-chats .chat-message p { color:var(--chat-text); font-size:13px; line-height:1.7; }
#page-chats .chat-form { flex:0 0 auto; padding:12px 20px 10px; border-top:1px solid var(--chat-line); background:var(--chat-shell); }
#page-chats .chat-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#page-chats .chat-compose { gap:8px; padding:6px; border:1px solid var(--chat-line); border-radius:15px; background:var(--chat-canvas); transition:border-color .2s,box-shadow .2s; }
#page-chats .chat-compose:focus-within { border-color:var(--chat-accent); box-shadow:0 0 0 3px var(--chat-accent-soft); }
#page-chats .chat-compose textarea { min-height:37px; max-height:130px; padding:9px 8px; border:0; outline:0; background:transparent; color:var(--chat-text); font-size:13px; line-height:1.5; resize:vertical; }
#page-chats .chat-compose textarea::placeholder { color:var(--chat-muted); }
.chat-send-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:39px; padding:0 13px; border:0; border-radius:10px; background:linear-gradient(135deg,#f49ac7,#df679f); color:#2b1222; box-shadow:0 5px 18px rgba(223,103,159,.21); font-size:11px; font-weight:800; }
.chat-send-button:hover { filter:brightness(1.08); }
.chat-send-button:disabled { opacity:.5; cursor:wait; }
.chat-send-button span:first-child { font-size:15px; transform:rotate(-25deg); }
#page-chats .chat-form [role=status] { min-height:15px; margin:5px 4px 0; color:var(--chat-muted); font-size:10px; opacity:1; }

.chat-profile-panel { min-width:0; display:flex; flex-direction:column; border-left:1px solid var(--chat-line); background:var(--chat-rail); }
.chat-profile-image { height:300px; position:relative; flex:0 0 auto; overflow:hidden; background:#3b2636; }
.chat-profile-image::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,var(--chat-rail)); pointer-events:none; }
.chat-profile-image img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.chat-profile-image-tag { position:absolute; left:14px; top:14px; z-index:1; padding:7px 9px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(20,13,25,.65); color:#fff; font-size:8px; font-weight:800; letter-spacing:.13em; backdrop-filter:blur(8px); }
.chat-profile-content { display:flex; flex:1; min-height:0; flex-direction:column; padding:0 19px 17px; }
.chat-profile-content h2 { margin:5px 0 1px; color:var(--chat-text); font-family:'Fraunces',serif; font-size:31px; font-weight:500; letter-spacing:-.04em; }
.chat-profile-role { margin:0; color:var(--chat-muted); font-size:11px; }
.chat-profile-divider { height:1px; margin:20px 0; background:var(--chat-line); }
#page-chats #chat-profile-summary { margin:9px 0 20px; overflow-y:auto; color:var(--chat-muted); font-size:11px; line-height:1.7; }
.chat-profile-footer { margin-top:auto; padding-top:13px; border-top:1px solid var(--chat-line); color:var(--chat-muted); font-size:9px; }
.chat-profile-footer span { color:var(--chat-accent); margin-right:4px; }

@media(max-width:1170px) {
  #page-chats .chat-app { grid-template-columns:190px minmax(0,1fr); }
  .chat-profile-panel { display:none; }
}
@media(max-width:850px) {
  #page-chats .chat-app { display:flex; flex-direction:column; height:auto; min-height:0; }
  #page-chats .chat-list-panel { min-height:0; padding:13px 13px 10px; border-right:0; border-bottom:1px solid var(--chat-line); }
  #page-chats .chat-list-heading { padding:0 2px 8px; }
  #page-chats .chat-list-heading h2 { font-size:16px; }
  #page-chats .chat-list { display:flex; flex:0 0 auto; gap:6px; margin:0; overflow-x:auto; }
  #page-chats .chat-list-item { min-width:140px; padding:7px; }
  .chat-list-note { display:none; }
  #page-chats .chat-panel { height:min(680px,calc(100dvh - 155px)); min-height:490px; }
  #page-chats .chat-panel-heading { min-height:72px; }
  #page-chats .chat-messages { min-height:0; }
}
@media(max-width:700px) {
  #page-chats .chat-page-heading { padding:4px 0 16px; }
  #page-chats .chat-page-heading h1 { font-size:37px; }
  .chat-page-kicker { display:none; }
  #page-chats .chat-app { border-radius:17px; }
  #page-chats .chat-panel { height:calc(100dvh - 315px); min-height:360px; }
  #page-chats .chat-panel-heading { padding:10px 14px; }
  #page-chats .chat-messages { padding:20px 14px; }
  #page-chats .chat-message { max-width:92%; padding:12px 14px; }
  #page-chats .chat-form { padding:10px 12px 7px; }
}
@media(max-width:420px) {
  #page-chats .chat-page-heading h1 { font-size:32px; }
  #page-chats .chat-status { display:none; }
  .chat-send-button span:last-child { display:none; }
  .chat-send-button { width:41px; padding:0; }
}

/* Full-height, four-column chat workspace. The chat list and profile can collapse. */
body[data-page=chats] { --chat-list-width:210px; --chat-profile-width:300px; overflow:hidden; }
body[data-page=chats][data-chat-list-open=false] { --chat-list-width:0px; }
body[data-page=chats][data-chat-profile-open=false] { --chat-profile-width:0px; }
body[data-page=chats] .app-shell { height:100dvh; min-height:0; }
body[data-page=chats] .sidebar { width:62px; flex:0 0 62px; height:100dvh; min-height:0; padding:14px 5px; align-items:center; background:#141318; border-color:rgba(245,235,243,.09); }
body[data-page=chats] .sidebar .brand { justify-content:center; width:100%; padding:0; }
body[data-page=chats] .sidebar .brand > span:last-child,
body[data-page=chats] .sidebar-label,
body[data-page=chats] .sidebar-callout,
body[data-page=chats] .sidebar-bottom { display:none; }
body[data-page=chats] .sidebar .brand-mark { width:42px; height:42px; border-radius:14px; }
body[data-page=chats] .side-nav { width:100%; gap:9px; margin-top:35px; }
body[data-page=chats] .sidebar .nav-link { justify-content:center; width:52px; height:51px; min-height:0; padding:0; font-size:0; border-radius:13px; }
body[data-page=chats] .sidebar .nav-link.active { box-shadow:inset 0 0 0 1px rgba(240,135,186,.3); }
body[data-page=chats] .sidebar .nav-icon { width:auto; font-size:24px; }
body[data-page=chats] .sidebar .nav-arrow { display:none; }
body[data-page=chats] .sidebar-preferences { width:52px; margin:0 0 8px; }
body[data-page=chats] .sidebar-preferences .theme-button { justify-content:center; width:52px; height:45px; padding:0; }
body[data-page=chats] .sidebar-preferences .theme-button #theme-label,
body[data-page=chats] .sidebar-preferences .theme-button > span:last-child { display:none; }
body[data-page=chats] .sidebar-preferences .theme-menu { left:58px; bottom:0; width:180px; }
#chat-rail-controls { display:none; }
body[data-page=chats] #chat-rail-controls { position:relative; display:flex; flex-direction:column; width:50px; margin:0 0 4px; }
body[data-page=chats] #chat-rail-controls .top-actions { display:flex; flex-direction:column; width:100%; gap:4px; margin:0; }
body[data-page=chats] #join-button { order:-2; display:grid; place-items:center; width:50px; height:46px; padding:0; border-radius:10px; background:#29232b; color:#e9b3cc; box-shadow:none; font-size:0; }
body[data-page=chats] #join-button::before { content:"+"; font-size:24px; font-weight:400; line-height:1; }
body[data-page=chats] #join-button:hover { background:#372b36; color:#f2d3e3; transform:none; }
body[data-page=chats] #login-button { position:relative; order:-1; display:block; width:50px; height:46px; padding:0; border-radius:10px; color:#958a96; font-size:0; }
body[data-page=chats] #login-button::before { content:""; position:absolute; top:9px; left:19px; width:12px; height:12px; border:2px solid currentColor; border-radius:50%; }
body[data-page=chats] #login-button::after { content:""; position:absolute; bottom:8px; left:14px; width:22px; height:11px; border:2px solid currentColor; border-bottom:0; border-radius:13px 13px 0 0; }
body[data-page=chats] #login-button:hover,
body[data-page=chats] #language-button:hover { background:#29232b; color:#f2d3e3; }
body[data-page=chats] #language-button { width:50px; height:46px; min-height:0; padding:0; gap:3px; border:0; border-radius:10px; background:transparent; color:#958a96; font-size:11px; }
body[data-page=chats] #language-button > span:first-child { color:inherit; font-size:15px; }
body[data-page=chats] #language-button > span:last-child { display:none; }
body[data-page=chats] #chat-rail-controls .language-menu { position:absolute; z-index:30; left:57px; right:auto; top:auto; bottom:0; width:136px; }
body[data-page=chats] #login-button:focus-visible,
body[data-page=chats] #language-button:focus-visible { outline:2px solid #dba3c1; outline-offset:2px; }
body[data-page=chats] .main-area { position:relative; height:100dvh; min-height:0; overflow:hidden; }
body[data-page=chats] .page-content { flex:1; width:100%; height:100dvh; max-width:none; margin:0; padding:0; overflow:hidden; }
body[data-page=chats] .footer,
body[data-page=chats] #page-chats .chat-page-heading { display:none; }
body[data-page=chats] .topbar { display:none; }
#page-chats { height:100dvh; min-height:0; }
#page-chats .chat-app { position:relative; display:grid; grid-template-columns:var(--chat-list-width) minmax(0,1fr) var(--chat-profile-width); height:100dvh; min-height:0; max-height:none; gap:0; border:0; border-radius:0; box-shadow:none; }
#page-chats .chat-list-panel { grid-column:1; }
#page-chats .chat-panel { grid-column:2; }
#page-chats .chat-profile-panel { grid-column:3; }
#page-chats .chat-app[data-list-open=false] .chat-list-panel,
#page-chats .chat-app[data-profile-open=false] .chat-profile-panel { display:none; }
#page-chats .chat-list-panel { min-height:0; padding:26px 15px 16px; border-right:1px solid var(--chat-line); border-bottom:0; }
#page-chats .chat-list-heading { padding:0 0 18px; }
#page-chats .chat-list-heading h2 { font-size:22px; }
.chat-layout-button { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--chat-line); border-radius:10px; background:var(--chat-accent-soft); color:var(--chat-text); font-size:20px; line-height:1; }
.chat-layout-button:hover { border-color:var(--chat-accent); color:var(--chat-accent); }
#page-chats .chat-list-panel .chat-new-button { width:100%; justify-content:center; min-height:40px; background:var(--chat-accent); color:#26111e; font-size:12px; }
.chat-search { display:flex; align-items:center; gap:7px; height:40px; margin:14px 0 12px; padding:0 12px; border:1px solid var(--chat-line); border-radius:11px; background:var(--chat-canvas); color:var(--chat-muted); }
.chat-search span { font-size:22px; }
.chat-search input { min-width:0; width:100%; border:0; outline:0; background:none; color:var(--chat-text); font:inherit; font-size:11px; }
.chat-search input::placeholder { color:var(--chat-muted); }
#page-chats .chat-list { display:grid; flex:1 1 auto; align-content:start; min-height:0; margin:0; overflow-x:hidden; overflow-y:auto; }
#page-chats .chat-list-item { width:100%; min-width:0; }
#page-chats .chat-list-item[hidden] { display:none!important; }
#page-chats .chat-panel { height:100dvh; min-height:0; }
#page-chats .chat-panel-heading { display:flex; justify-content:space-between; gap:11px; min-height:75px; margin-top:0; padding:11px 18px; }
.chat-heading-actions { display:flex; align-items:center; gap:9px; }
#page-chats .chat-messages { flex:1 1 auto; min-height:0; }
#page-chats .chat-form { padding:13px 20px 12px; }
#page-chats .chat-profile-panel { display:flex; min-height:0; overflow-y:auto; }
#page-chats .chat-profile-image { height:min(47vh,440px); min-height:240px; }
#page-chats .chat-profile-image .chat-panel-close { position:absolute; z-index:2; right:14px; top:14px; width:32px; height:32px; background:rgba(20,13,25,.75); color:#fff; border-color:rgba(255,255,255,.2); }
#page-chats .chat-profile-content { padding-top:6px; }

@media(max-width:1170px) {
  body[data-page=chats] { --chat-profile-width:0px; }
  #page-chats .chat-app[data-profile-open=true] .chat-profile-panel { position:absolute; z-index:20; top:0; right:0; bottom:0; display:flex; width:min(320px,calc(100% - 60px)); box-shadow:-15px 0 45px rgba(0,0,0,.45); }
}
@media(max-width:850px) {
  body[data-page=chats] { --chat-list-width:0px; }
  #page-chats .chat-app { display:grid; grid-template-columns:minmax(0,1fr); }
  #page-chats .chat-panel { grid-column:1; }
  #page-chats .chat-app[data-list-open=true] .chat-list-panel { position:absolute; z-index:21; top:0; left:0; bottom:0; display:flex; width:min(290px,calc(100% - 60px)); border-right:1px solid var(--chat-line); box-shadow:15px 0 45px rgba(0,0,0,.45); }
  #page-chats .chat-panel { height:100dvh; min-height:0; }
}
@media(max-width:700px) {
  body[data-page=chats] .sidebar { position:relative; z-index:11; left:auto; top:auto; width:58px; flex-basis:58px; transform:none; padding:12px 4px; box-shadow:none; }
  body[data-page=chats] .sidebar.open { transform:none; }
  body[data-page=chats] .sidebar .brand-mark { width:40px; height:40px; }
  body[data-page=chats] .sidebar .nav-link { width:49px; height:49px; }
  body[data-page=chats] .sidebar-preferences, body[data-page=chats] .sidebar-preferences .theme-button { width:49px; }
  body[data-page=chats] .main-area { margin-left:0; }
  body[data-page=chats] .topbar { padding:0 12px; }
  #page-chats .chat-app { border-radius:0; }
  #page-chats .chat-panel-heading { padding:9px 10px; }
  #page-chats .chat-status { display:none; }
  #page-chats .chat-messages { padding:18px 12px; }
  #page-chats .chat-form { padding:10px 11px 8px; }
}
@media(max-width:420px) {
  body[data-page=chats] .top-actions { gap:7px; }
  body[data-page=chats] .topbar .language-button { padding:6px; }
  #page-chats .chat-heading-avatar { width:40px; height:40px; flex-basis:40px; }
  #page-chats .chat-panel-heading h2 { font-size:16px; }
  #page-chats .chat-panel-heading .chat-overline { font-size:8px; }
}

/* Quiet visual treatment: the conversation stays central and controls recede. */
body[data-page=chats] .sidebar .brand-mark { width:38px; height:38px; border-radius:12px; background:#30242d; color:#e9b3cc; box-shadow:none; }
body[data-page=chats] .side-nav { margin-top:29px; gap:4px; }
body[data-page=chats] .sidebar .nav-link { width:50px; height:46px; border-radius:10px; }
body[data-page=chats] .sidebar .nav-icon { color:#958a96; font-size:21px; }
body[data-page=chats] .sidebar .nav-link.active { background:#29232b; box-shadow:none; }
body[data-page=chats] .sidebar .nav-link.active .nav-icon { color:#f2d3e3; }
body[data-page=chats] .sidebar-preferences,
body[data-page=chats] .sidebar-preferences .theme-button { width:50px; }
body[data-page=chats] .sidebar-preferences .theme-button { background:transparent; border-color:rgba(245,235,243,.09); }
#page-chats .chat-list-panel { padding:18px 10px 12px; }
#page-chats .chat-list-heading { padding:0 3px 10px; }
#page-chats .chat-list-heading .chat-overline { display:none; }
#page-chats .chat-list-heading h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.025em; }
.chat-layout-button { width:31px; height:31px; border-color:transparent; border-radius:8px; background:transparent; color:var(--chat-muted); font-size:17px; }
.chat-layout-button:hover { background:var(--chat-accent-soft); border-color:transparent; color:var(--chat-text); }
#page-chats .chat-list-panel .chat-new-button { min-height:34px; border:1px solid var(--chat-line); border-radius:8px; background:#252127; color:var(--chat-text); font-size:11px; font-weight:600; box-shadow:none; }
#page-chats .chat-list-panel .chat-new-button:hover { background:#302a31; }
.chat-new-button span:first-child { font-size:16px; }
.chat-search { height:34px; margin:10px 0 9px; padding:0 9px; border-color:var(--chat-line); border-radius:8px; background:#151419; }
.chat-search span { font-size:18px; }
.chat-search input { font-size:10px; }
#page-chats .chat-list { gap:3px; }
#page-chats .chat-list-item { gap:8px; padding:7px 6px; border-radius:8px; }
#page-chats .chat-list-item.selected { border-color:transparent; background:#29242b; }
#page-chats .chat-list-item:hover { background:#252127; }
.chat-list-avatar { flex-basis:28px; width:28px; height:28px; border:0; border-radius:8px; background:#493544; font-size:16px; }
.chat-list-details strong { font-size:11px; font-weight:600; }
.chat-list-details small { font-size:9px; }
#page-chats .chat-list-note { display:none; }
#page-chats .chat-panel-heading { min-height:65px; padding:8px 15px; }
#page-chats .chat-panel-heading .chat-overline { display:none; }
.chat-heading-person { gap:9px; }
.chat-heading-avatar { width:39px; height:39px; flex-basis:39px; border-radius:10px; }
#page-chats .chat-panel-heading h2 { margin:0 0 3px; font-size:16px; font-weight:600; }
.chat-presence { font-size:9px; }
#page-chats .chat-status { padding:0; border:0; background:none; color:var(--chat-muted); font-size:10px; }
#page-chats .chat-status span { display:none; }
#page-chats .chat-messages { padding:24px clamp(18px,3vw,42px); background-color:var(--chat-canvas); background-image:linear-gradient(rgba(18,16,22,.78),rgba(18,16,22,.84)),url('./assets/creator/realistic.jpg'); background-position:center,center 28%; background-size:cover; background-repeat:no-repeat; }
#page-chats .chat-message { max-width:min(84%,760px); margin-bottom:14px; padding:13px 16px; border-color:var(--chat-line); border-radius:12px 12px 12px 4px; background:#1c1a20; box-shadow:none; }
#page-chats .chat-message.from-user { border-radius:12px 12px 4px 12px; background:#302730; }
#page-chats .chat-message-label { margin-bottom:6px; color:var(--chat-muted); font-size:9px; letter-spacing:.04em; }
#page-chats .chat-message p { font-size:13px; line-height:1.62; }
#page-chats .chat-form { padding:10px 15px; }
#page-chats .chat-compose { align-items:center; gap:5px; padding:4px 5px 4px 10px; border-radius:10px; background:#1b191f; box-shadow:none; }
#page-chats .chat-compose textarea { min-height:32px; max-height:130px; padding:7px 4px; font-size:12px; }
.chat-send-button { width:34px; height:34px; min-height:0; padding:0; border-radius:8px; background:#dba3c1; color:#271c25; box-shadow:none; }
.chat-send-button span:last-child { display:none; }
.chat-send-button span:first-child { font-size:14px; }
#page-chats .chat-profile-panel { background:var(--chat-rail); }
#page-chats .chat-profile-image { height:min(44vh,400px); }
#page-chats .chat-profile-image-tag { display:none; }
#page-chats .chat-profile-content { padding:16px 17px; }
#page-chats .chat-profile-content h2 { font-size:27px; }

@media(max-width:850px) {
  #page-chats .chat-app[data-list-open=true] .chat-list-panel { width:min(232px,calc(100% - 54px)); }
}
@media(max-width:700px) {
  body[data-page=chats] .sidebar { width:54px; flex-basis:54px; padding:12px 2px; }
  body[data-page=chats] .sidebar .nav-link,
  body[data-page=chats] .sidebar-preferences,
  body[data-page=chats] .sidebar-preferences .theme-button { width:48px; }
  #page-chats .chat-panel-heading { padding:7px 8px; }
  #page-chats .chat-messages { padding:15px 11px; }
  #page-chats .chat-form { padding:8px 9px; }
}

body[data-theme=cream][data-page=chats] .sidebar { background:#fff9f7; border-color:#eadbd7; }
body[data-theme=cream][data-page=chats] .sidebar .brand-mark { background:#f3dce4; color:#a83d67; }
body[data-theme=cream][data-page=chats] .sidebar .nav-icon { color:#8c7580; }
body[data-theme=cream][data-page=chats] .sidebar .nav-link.active { background:#f4e7ea; }
body[data-theme=cream][data-page=chats] .sidebar .nav-link.active .nav-icon { color:#b14a70; }
body[data-theme=cream][data-page=chats] .sidebar-preferences .theme-button { border-color:#eadbd7; }
body[data-theme=cream] #page-chats .chat-list-panel .chat-new-button,
body[data-theme=cream] #page-chats .chat-search,
body[data-theme=cream] #page-chats .chat-compose { background:#fffdfb; color:var(--chat-text); }
body[data-theme=cream] #page-chats .chat-list-panel .chat-new-button:hover,
body[data-theme=cream] #page-chats .chat-list-item:hover { background:#f8ecef; }
body[data-theme=cream] #page-chats .chat-list-item.selected { background:#f2e2e8; }
body[data-theme=cream] #page-chats .chat-message { background:#fffdfb; }
body[data-theme=cream] #page-chats .chat-message.from-user { background:var(--chat-user); }
body[data-theme=cream] #page-chats .chat-messages { background-image:linear-gradient(rgba(255,249,247,.79),rgba(255,249,247,.88)),url('./assets/creator/realistic.jpg'); }