/* Luma / Color & Character — responsive theme, October 2026 */
:root {
  --ink:#242035; --muted:#655c75; --green:#6246e5; --green-dark:#4530a8;
  --sage:#e9e2ff; --line:#e4dff0; --paper:#fffefd; --cream:#f7f4ff;
  --violet:#6246e5; --violet-soft:#eee8ff; --orange:#ff955e; --orange-ink:#4b2514;
  --mint:#bdeedc; --font:'DM Sans',system-ui,sans-serif;
}
body {font-weight:500; color:var(--ink); background:#f6f2ff;}
svg {stroke-width:2.15;}
button {font-weight:700;}
button:hover {filter:none;}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #8268f0; outline-offset:4px;
}
button:active {transform:translateY(2px);}
.rail {background:#eee8fb; border-right:1px solid #ded5f0;}
.brand-symbol {
  background:#282037; color:#fff; border-radius:17px;
  box-shadow:0 4px 0 #d4c8ec;
}
.brand-symbol svg {stroke-width:5.5;}
.rail nav {gap:15px;}
.nav-item {color:#655875; font-size:11px; font-weight:750; padding:14px 3px;}
.nav-item:hover {background:#e4dbf8;}
.nav-item.active {background:var(--violet); color:white; box-shadow:0 4px 0 #d4c5fb;}
.help-button {color:#57476e; border:2px solid #b9a9d4; width:30px; height:30px; font-weight:800;}
.my-avatar {background:var(--orange); color:#552817; outline:2px solid #f5d0bc; font-weight:800;}
.topbar {background:#fffefd;}
.wordmark {font-weight:800; font-size:34px; color:#262033; letter-spacing:-2px;}
.wordmark-dot {background:#ff8e55; width:9px; height:9px; margin-left:4px;}
.tagline {color:#6b607a; font-size:12px; font-weight:600;}
.prototype-badge {color:#594293; background:#eee6ff; border:1.5px solid #dcd0f8; font-weight:700;}
.prototype-badge>span {background:#7957e8;}
.demo-note {background:#fff0cf; color:#75521c; border-color:#f5dfb0; font-size:11px; height:38px;}
.demo-note b {font-weight:650;}
.eyebrow {color:#76618f; font-size:10px; font-weight:750; letter-spacing:1.4px;}
h1 {font-weight:800; font-size:24px; color:#262035; letter-spacing:-1.1px;}
h1>span {color:#f2864d;}
.section-title {gap:10px;}
.section-title>div {min-width:0;}
.section-title .eyebrow {font-size:9px;}
.icon-button {height:42px; width:42px; border-radius:13px; color:#685285;}
.icon-button:hover {background:#ece4fc;}
.icon-button svg {width:21px; height:21px; stroke-width:2.2;}
.add-chat {height:44px; width:44px; color:#4d2718; background:var(--orange); box-shadow:0 3px 0 #f1cebb; border:1px solid #f18d58;}
.add-chat:hover {background:#ffab7e;}
.add-chat svg {stroke-width:2.8; width:24px; height:24px;}
.search-box {height:45px; background:#f7f4fc; border:1.5px solid #dfd6ee; color:#776588;}
.search-box input {font-weight:550; font-size:13px;}
.search-box:focus-within {border-color:#8f76eb; box-shadow:0 0 0 3px #eee7ff;}
input::placeholder {color:#756b83; opacity:1;}
.search-box kbd {color:#837591;}
.filters {gap:10px;}
.filter {font-size:12px; font-weight:700; min-height:38px; padding:8px 12px; color:#6e5d84; border:1px solid #e5dcef; border-radius:10px;}
.filter:hover {background:#f5f0ff;}
.filter.active {background:var(--violet); color:#fff; border-color:var(--violet);}
.filter span {font-size:10px; font-weight:700; background:#e9e1f6; color:#6d538c;}
.filter.active span {color:white; background:#ffffff26;}
.contact {border:1.5px solid transparent; padding:16px 10px; margin-bottom:7px; border-radius:16px;}
.contact:hover {background:#f8f4ff;}
.contact.active {background:#eee6ff; border-color:#cfbdf8;}
.contact.active:before {background:var(--violet); width:4px;}
.contact-row strong {font-weight:800; font-size:14px; color:#2c243b;}
.contact-row time {color:#71627f; font-size:10px; font-weight:600;}
.contact-preview p {font-size:12px; font-weight:500; color:#6b5e79;}
.avatar {border-radius:15px; font-weight:800; font-size:14px; box-shadow:inset 0 0 0 1px #00000009; background:#efe2ff; color:#5c3c84;}
.avatar-clara {background:#ffd1b9; color:#754024; border-radius:16px;}
.avatar-marco {background:#bdeedc; color:#236453; border-radius:16px;}
.avatar-sofia {background:#e3c9fa; color:#704394; border-radius:16px;}
.avatar-leo {background:#c0e2ff; color:#32658e; border-radius:16px;}
.unread-dot {background:#ff9a61; color:#512818; height:20px; min-width:20px; font-size:10px; font-weight:800; border-radius:7px;}
.sidebar-footer {border-color:var(--line); margin-bottom:22px;}
.tiny-orbit {background:#e8dcff; width:35px; height:35px; border-radius:11px; flex-shrink:0;}
.tiny-orbit svg {color:#7754b3; width:18px; height:18px;}
.sidebar-footer b {font-weight:750; font-size:12px; color:#4c385e;}
.sidebar-footer p {font-size:11px; color:#796586; line-height:1.5;}
.text-link {font-size:11px; color:#6948ac; font-weight:750;}
.text-link:hover {text-decoration:underline;}
.conversation {background:#faf7ff;}
.conversation-header {background:#fffefd;}
.conversation-person {min-width:0;}
.conversation-person h2 {font-size:17px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.conversation-person span {color:#7a688a; font-size:10px; font-weight:550;}
.conversation-person i {background:#8c65d6;}
.conversation-tools {gap:8px;}
.conversation-tools>.icon-button[data-action="voice-call"] {background:#e9dcfc; color:#6c40b0; border:1px solid #d9c6f3;}
.conversation-tools>.icon-button[data-action="video-call"] {background:var(--violet); color:#fff; box-shadow:0 3px 0 #dfd4fb;}
.messages {background:radial-gradient(ellipse at 100% 0,#ede5ff75,transparent 65%),#faf7ff;}
.day-divider {color:#7f6b92; font-size:10px; font-weight:700;}
.day-divider:before,.day-divider:after {background:#dfd4ef;}
.intro-note {font-size:11px; color:#7d6a90; font-weight:500; line-height:1.6;}
.bubble {font-size:14px; line-height:1.65; font-weight:500; border-color:#e6dced; background:#fff; color:#393145; box-shadow:0 3px 0 #ebe4f34d;}
.mine .bubble {background:var(--violet); color:#fff; border-color:var(--violet);}
.message-meta {font-size:10px; color:#7c6d88; font-weight:500; margin-top:7px;}
.message-meta svg {color:#8968c4; stroke-width:2.5;}
.voice-play {width:36px; height:36px; color:#7850bd; background:#eee5fc; flex-shrink:0;}
.waveform i {background:#9876cf; width:3px;}
.voice-example,.voice-duration {color:#79658f; font-weight:600;}
.mine .voice-play {background:#ffffff28; color:#fff;}
.mine .waveform i {background:#c7b5ff;}
.mine .voice-example,.mine .voice-duration {color:#e6ddff;}
.payment-bubble,.mine .payment-bubble {color:#2e2540; border:1.5px solid #cdb9f1!important; box-shadow:0 3px 0 #e4d8fa;}
.payment-top {padding:17px;}
.payment-icon {background:#ffdbc6; color:#914823; border-radius:12px;}
.payment-top strong {font-size:24px; font-weight:800; color:#332348;}
.payment-top strong small {font-weight:750; color:#7a608f;}
.payment-top p {font-size:11px; font-weight:550; color:#7d678b;}
.payment-foot {background:#eee5fc; border-color:#e2d5f4; color:#684989; font-size:10px; font-weight:650;}
.conversation-bottom {background:#fffefd; border-color:var(--line);}
.suggestions {gap:8px; margin-bottom:13px;}
.suggestions>span {color:#7c678e; font-size:8px; font-weight:750; letter-spacing:.7px;}
.suggestions button {font-size:11px; font-weight:750; min-height:34px; padding:7px 10px; border-radius:9px;}
.suggestions button[data-action="pay"] {background:#ffdbc6; color:#6d341b; border:1px solid #ffc59e;}
.suggestions button[data-action="request"] {background:#eee4fc; color:#684094; border:1px solid #decef3;}
.suggestions button:hover {filter:brightness(.98);}
.suggestions svg {stroke-width:2.5; height:14px; width:14px;}
.composer {border:1.5px solid #cdbde1; background:#fff; box-shadow:0 3px 0 #ebe2f5; border-radius:16px;}
.composer:focus-within {border-color:#8e6be1; box-shadow:0 0 0 3px #eee5ff;}
.composer input {font-weight:550; font-size:14px; padding-left:4px;}
/* The rounded composer already indicates focus; avoid a second square ring
   around the text that overlaps the adjacent microphone button. */
.composer input:focus,.composer input:focus-visible {outline:none; box-shadow:none;}
.composer .icon-button {height:38px; width:38px; background:#f3ecfc;}
.composer .mic-button {background:#ffeadf; color:#905635;}
.send-button {height:42px; width:42px; color:#fff; background:var(--violet); border-radius:12px;}
.send-button svg {width:20px; height:20px; stroke-width:2.2;}
.composer-caption {color:#7d6d8b; font-size:9px; line-height:1.5;}
.right-panel {background:#fffefd;}
.right-heading {color:#705d83; font-weight:750; font-size:10px; letter-spacing:1.1px;}
.pill {color:#775289; border-color:#d8c5e7; background:#f0e8f9; font-size:9px; font-weight:750;}
.mini-wallet {background:#e4d5ff; border-color:#cab3ee; box-shadow:0 4px 0 #eee4fc;}
.mini-wallet>span {color:#715391; font-size:11px; font-weight:600;}
.mini-wallet>strong {color:#3e2465; font-weight:800; font-size:29px;}
.mini-wallet small {color:#77568f; font-weight:750;}
.mini-wallet button {font-size:11px; color:#573582; border-color:#c6ade8;}
.wallet-decoration span {border-color:#9165d1;}
.connection-card {background:#fff0de; border-color:#f3d3ae; padding-top:18px;}
.orb-one {background:radial-gradient(circle at 25% 20%,#ffd9ad,#ff9a53); box-shadow:4px 10px 20px #d8965b25;}
.orb-two {background:radial-gradient(circle at 25% 20%,#dfc4ff,#9e75e6); box-shadow:4px 10px 20px #9a6ac627;}
.connection-art span {color:#c9753f;}
.connection-card h3 {color:#503923; font-weight:800;}
.connection-card p {font-size:12px; color:#896644; font-weight:500;}
.soft-button {font-size:12px; color:#5d3f87; background:#ece0fc; border:1px solid #d6bcef; font-weight:750; min-height:42px;}
.soft-button:hover {background:#e1d0f6;}
.connection-card .soft-button {background:#ffcd9e; border-color:#f2b881; color:#6c3f20; font-size:11px;}
.right-foot {color:#7a688a; font-size:10px;}
.full-view {background:radial-gradient(ellipse at 100% 0,#eadfff,transparent 65%),#faf7ff;}
.page-head h1 {font-weight:800; font-size:34px;}
.page-head p {font-size:13px; color:#766185; font-weight:500;}
.main-button {background:var(--violet); color:#fff; font-size:13px; font-weight:750; min-height:46px; border-radius:12px; box-shadow:0 3px 0 #d5c5f7;}
.main-button:hover {background:#5335d2;}
.main-button svg {stroke-width:2.3;}
.balance-card {background:linear-gradient(125deg,#4d2ec5,#8060e8); color:white; box-shadow:0 6px 0 #e5d9fa;}
.balance-card>small {color:#f0e6ff; font-weight:650; font-size:12px;}
.balance-card>strong {font-size:48px; font-weight:800; letter-spacing:-1.7px;}
.balance-card>strong small {color:#ecdcff; font-weight:700;}
.balance-card>p {color:#e6d9ff; font-size:12px;}
.balance-card .wallet-decoration span {border-color:#d0b8ff;}
.balance-actions button {font-weight:750; background:#ffffff20; border:1.5px solid #ffffff40; min-height:43px; color:#fff;}
.balance-actions button:first-child {background:#ffaf7a; color:#4a2318; border-color:#ffaf7a;}
.balance-actions button:hover {filter:brightness(1.06);}
.white-card {border:1.5px solid #e2d6ef; box-shadow:0 4px 0 #f0e8f7;}
.white-card h3 {font-weight:800; font-size:17px; color:#3a294b;}
.asset-icon {background:#e9dbff; color:#754bad; font-weight:750;}
.asset-row,.activity-row {border-color:#e8deef;}
.asset-text b {font-size:13px; font-weight:750; color:#463151;}
.asset-text p {font-size:11px; color:#80678d; font-weight:500;}
.asset-value {font-size:13px; font-weight:750; color:#59406c;}
.asset-value small {color:#82688e; font-size:10px; font-weight:500;}
.small-notice {font-size:12px; color:#776087;}
.call-art-card {background:#eee1ff; border-color:#d9c2f4;}
.call-art-card h2 {font-weight:800; color:#47305f;}
.call-art-card p {color:#816291; font-weight:500;}
.call-history .icon-button {background:#eee1ff; color:#7141aa;}
.profile-avatar {background:#ffc5a1; color:#793f24; font-weight:800;}
.profile-card h2 {font-weight:800;}
.profile-card p {color:#80668f; font-size:12px;}
.setting-row b {font-weight:750; font-size:13px;}
.setting-row p {color:#7f658d; font-size:11px;}
.setting-row>span {color:#765293; font-size:10px; font-weight:750;}
.empty-state {color:#80678e;}
dialog {border:1.5px solid #ddcaee; box-shadow:0 25px 90px #25113d40;}
dialog::backdrop {background:#27173d66;}
.modal-header h2 {font-weight:800; font-size:24px; color:#34203f;}
.modal-header>.icon-button {background:#f0e6fb;}
.modal-text {font-size:13px; color:#7d648a;}
.form-field span {font-weight:700; font-size:12px; color:#785a88;}
.form-field input,.form-field select {border:1.5px solid #d6c1e8; background:#faf6ff; font-size:16px; font-weight:550; color:#422950;}
.amount-field {background:#f2e9ff; border-color:#d9c3ef;}
.amount-field input {font-weight:800; color:#62408a;}
.amount-field span {color:#81579e; font-weight:750;}
.form-error {color:#a13d34; font-weight:600;}
.modal-footer-note {color:#7e668b; font-size:11px;}
.review-row>span {color:#7f648d;}
.review-row strong {font-weight:750;}
.review-amount {font-weight:800; color:#59347c;}
.review-amount small {color:#815c98; font-weight:700;}
.success-icon {background:#d3f1e3; color:#316d57;}
.call-screen {background:radial-gradient(ellipse at 5% 0,#dac1ff,transparent 65%),#f4ebff;}
.call-screen h2 {font-weight:800;}
.call-screen>p,.call-status {color:#7a5c8d;}
.call-demo-label {color:#7e5a97; font-weight:750;}
.call-control {background:#ddc8fa; color:#704797; border:1px solid #cdb0ef;}
.call-control[aria-pressed=true] {background:#7950bf; color:#fff;}
.call-control.end-call {background:#c94949; color:#fff; border-color:#b93d3d;}
.video-tile {background:#ffcfad; color:#815334; font-weight:700;}
.voice-preview {background:#eee0fc;}
.voice-preview p {color:#7e5596; font-weight:550;}
.identity-code {background:#eee0fc; color:#704895; font-weight:700;}
.about-list {color:#7a5e89; font-size:13px;}
#toast {background:#3d285d; color:#fff; font-weight:600; box-shadow:0 8px 30px #30144333;}
@media (max-width:900px) {
  h1 {font-size:21px;}
  .section-title {padding:0 16px; gap:7px;}
  .add-chat {width:40px; height:40px;}
  .page-head h1 {font-size:29px;}
  .page-head .main-button {font-size:12px;}
  .conversation-tools {gap:5px;}
  .conversation-person h2 {font-size:16px;}
  .bubble {font-size:14px;}
}
@media (max-width:650px) {
  .topbar {height:67px;}
  .wordmark {font-size:32px;}
  .prototype-badge {font-size:10px; padding:8px 10px;}
  .demo-note {height:35px;}
  .demo-note b {font-size:10px; font-weight:650;}
  .conversations {padding-top:25px;}
  .section-title {padding:0 22px; gap:9px;}
  .section-title h1 {font-size:28px;}
  .section-title .eyebrow {font-size:10px;}
  .add-chat {height:47px; width:47px; border-radius:14px;}
  .search-box {height:48px; margin-top:22px; margin-bottom:18px;}
  .search-box input {font-size:16px;}
  .filter {font-size:13px; min-height:40px;}
  .filters {margin-bottom:16px;}
  .contact {padding:17px 12px; gap:13px; margin-bottom:8px; border-radius:17px;}
  .contact .avatar {height:49px; width:49px; font-size:16px;}
  .contact-row strong {font-size:16px;}
  .contact-row time {font-size:11px;}
  .contact-preview p {font-size:13px;}
  .sidebar-footer {margin-bottom:16px; padding-top:16px;}
  .sidebar-footer b {font-size:12px;}
  .sidebar-footer p {font-size:11px;}
  .mobile-nav {background:#fffefd; padding:9px 10px max(10px,env(safe-area-inset-bottom)); border-top:1px solid #ded2ef; gap:8px;}
  .mobile-nav button {font-size:11px; font-weight:750; color:#79628c; min-height:52px; border-radius:13px; padding:7px 2px; gap:5px;}
  .mobile-nav svg {height:23px; width:23px; stroke-width:2.3;}
  .mobile-nav button.active {background:var(--violet); color:white; box-shadow:0 3px 0 #d8c8f6;}
  .conversation-header {gap:8px; padding:12px; height:79px;}
  .conversation-header .avatar {height:40px; width:40px; font-size:13px; border-radius:13px;}
  .mobile-back {width:29px; background:#f1e8fc; color:#775297;}
  .conversation-person {flex:1;}
  .conversation-person h2 {font-size:16px; margin-bottom:4px;}
  .conversation-person span {font-size:9px; line-height:1.4;}
  .conversation-tools {gap:7px;}
  .conversation-tools .icon-button {width:41px; height:41px; border-radius:12px;}
  .messages {padding:20px 15px;}
  .bubble {padding:12px 15px; max-width:88%;}
  .payment-bubble {padding:0;}
  .payment-top strong {font-size:23px;}
  .intro-note {font-size:10px;}
  .conversation-bottom {padding:10px 10px max(10px,env(safe-area-inset-bottom));}
  .suggestions {justify-content:flex-end; margin:0 2px 12px;}
  .suggestions>span {font-size:7px; max-width:70px; line-height:1.5;}
  .suggestions button {font-size:11px; min-height:36px; padding:7px 10px;}
  .composer {gap:4px; padding:6px;}
  .composer input {font-size:16px;}
  .composer .icon-button {height:36px; width:33px; border-radius:10px;}
  .send-button {width:39px; height:39px;}
  .composer-caption {font-size:9px;}
  .page-head h1 {font-size:29px;}
  .page-head p {font-size:12px;}
  .page-head .main-button {font-size:11px; padding:10px;}
  .balance-card>strong {font-size:43px;}
  .balance-actions button {padding:10px 12px; font-size:12px;}
  .wallet-layout {gap:22px;}
  .wallet-activity {padding:18px;}
  .asset-value {font-size:12px;}
  .call-history h3 .pill {display:inline-block; margin-top:5px;}
  .setting-row>span {font-size:9px;}
  .modal-header h2 {font-size:23px;}
  .modal-inner {padding:24px;}
  .amount-field input {font-size:35px;}
}
@media (max-width:360px) {
  .section-title h1 {font-size:25px;}
  .section-title {padding:0 19px;}
  .conversation-tools .icon-button {height:38px; width:38px;}
  .conversation-tools {gap:5px;}
  .conversation-person span {font-size:8px;}
  .balance-card {padding:22px;}
  .balance-actions {gap:7px;}
  .balance-actions button {padding:9px 10px; gap:5px;}
}