/* CHMURKA 0.1 — autorska warstwa wizualna. Layout z wersji Claude, idea PWA z obu projektów. */
:root {
  color-scheme: light;
  --navy:#214b44; --navy-2:#2e665c; --navy-3:#3c7c70;
  --mint:#c6a87b; --mint-d:#b99967; --mint-soft:#eaf3ed;
  --bg:#f4f2ed; --card:#fffefb; --line:#e5e2d9;
  --text:#273834; --muted:#70817a; --danger:#b94e55;
  --shadow:0 4px 20px rgba(31,62,54,.055),0 1px 2px rgba(31,62,54,.035);
  --radius:15px;
}
html[data-theme="dark"] {
  color-scheme:dark; --navy:#162a29; --navy-2:#294843; --navy-3:#3c655b;
  --mint:#cbb58e; --mint-d:#dcc39a; --mint-soft:#243f39;
  --bg:#14221f; --card:#1b2b28; --line:#334740;
  --text:#eaf2ed; --muted:#aabfb4; --danger:#ee9ba0;
  --shadow:0 10px 35px rgba(0,0,0,.18);
}
body {background:var(--bg);color:var(--text);letter-spacing:.005em}
.side {background:var(--card);border-right-color:var(--line)}
.side-top,.login-top {background:var(--navy);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{font-size:20px;letter-spacing:-.045em}
.brand-heart{width:31px;height:31px;border-radius:11px;background:#d2b88c;color:#213f38;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:400;line-height:1}
.login-top .dot{background:#dbc49a}.login-card{border:1px solid var(--line);background:var(--card);border-radius:22px;box-shadow:var(--shadow)}
.login-card h1{color:var(--text);font-size:27px;letter-spacing:-.05em}
.welcome-symbol{width:58px;height:58px;background:#e8d9bb;color:#345b4e;border-radius:19px;display:grid;place-items:center;margin-bottom:22px;font-size:40px}
.login-wrap{background:radial-gradient(ellipse at 80% 12%,rgba(196,173,130,.16),transparent 40%),var(--bg)}
.btn,.field input,.field select,.field textarea{background:var(--card);color:var(--text);border-color:var(--line);border-radius:12px}
.btn-primary{background:var(--navy-2);border-color:var(--navy-2);color:#fff}.btn-primary:hover{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
.search{background:var(--bg);border:1px solid var(--line);border-radius:12px}.search input{color:var(--text)}
.conv{border-left-width:0;margin:3px 8px;border-radius:12px;padding:13px 12px}.conv:hover{background:var(--bg)}.conv.active{background:var(--mint-soft)}
.badge{background:var(--navy-2);color:#fff}
.icon-btn:hover{background:var(--mint-soft)}
html[data-theme="dark"] .side-top .icon-btn:hover{background:var(--navy-2)}
html[data-theme="dark"] .conv:hover,html[data-theme="dark"] .btn:hover{background:var(--navy-2)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{color:var(--text);background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .chat,html[data-theme="dark"] .chat-empty,html[data-theme="dark"] .chat-body,html[data-theme="dark"] .chat-messages,html[data-theme="dark"] .modal,html[data-theme="dark"] .menu{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .chat-header,html[data-theme="dark"] .composer,html[data-theme="dark"] .chat-foot,html[data-theme="dark"] .msg,html[data-theme="dark"] .message{border-color:var(--line)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}