/* Luma / Cielo & Nuvole: pastel blue surfaces, cushioned icon tiles. */
:root{--paper:#f8fcff;--cream:#eaf6ff;--line:#d4e6f2;--sky:#e4f4ff;--sky-ink:#395c78}
body{background:#e6f4ff}
.workspace{background:#eef8ff}
.topbar{background:linear-gradient(115deg,#fbfdff,#eaf6ff);border-color:#d2e5f3}
.rail{background:linear-gradient(180deg,#e0f2ff,#edf0ff);border-color:#cbdfee}
.conversations{background:radial-gradient(ellipse at 0 12%,#d9f1ff,transparent 70%),linear-gradient(160deg,#edf8ff,#e8f3ff 65%,#f1edff);border-color:#d4e4f2}
.conversation{background:#eaf6ff}
.conversation-header,.conversation-bottom{background:linear-gradient(110deg,#fbfdff,#eff8ff);border-color:#d5e7f3}
.messages{background:radial-gradient(ellipse at 100% 0,#d7eeffb3,transparent 65%),linear-gradient(145deg,#edf8ff,#f1edff)}
.right-panel{background:linear-gradient(160deg,#f4fbff,#e9f5ff);border-color:#d6e7f3}
.full-view,.social-view:not(.social-expanded){background:radial-gradient(ellipse at 100% 0,#e2e6ff99,transparent 60%),linear-gradient(150deg,#e6f5ff,#f2faff 60%,#edf0ff)}
.search-box{background:linear-gradient(180deg,#ffffff,#f0f9ff);border-color:#bdd9ed;border-radius:17px;box-shadow:inset 0 2px 0 #fff,0 4px 0 #bed9ed40;color:#58738e}
.search-box:focus-within{border-color:#9374e4;box-shadow:0 0 0 3px #dcd1ff80}
.filter:not(.active){background:#ffffffbd;border-color:#cddcec;box-shadow:inset 0 2px 0 #fff,0 3px 0 #ccdfef50}
.filter.active,.social-tabs button.active{background:linear-gradient(160deg,#7b5af1,#6041d9);box-shadow:inset 0 2px 1px #b69aff70,0 4px 0 #c7b9f5}
.contact{background:#ffffff6b;border-color:#ffffffaa;box-shadow:0 3px 0 #c3def034;border-radius:20px}
.contact:hover{background:#fafdff;border-color:#c3ddeb}
.contact.active{background:linear-gradient(120deg,#e8ddff,#f1eaff);border-color:#c8b4f3;box-shadow:inset 0 2px 0 #ffffff99,0 4px 0 #cfbff04a}
.avatar{border-radius:19px;box-shadow:inset 0 3px 1px #ffffff8c,inset 0 -4px 0 #00000006,0 4px 8px #4d709415;border:1px solid #ffffff70}
.avatar-clara{background:radial-gradient(circle at 30% 15%,#ffe4cd,#ffcaad 80%);color:#754024}
.avatar-marco{background:radial-gradient(circle at 30% 15%,#d9fff0,#ade7d0 80%);color:#236453}
.avatar-sofia{background:radial-gradient(circle at 30% 15%,#f0ddff,#d9b8f3 80%);color:#704394}
.avatar-leo{background:radial-gradient(circle at 30% 15%,#d9f3ff,#abd8fb 80%);color:#32658e}
.unread-dot{background:linear-gradient(150deg,#ffbb86,#ff985e);box-shadow:inset 0 2px 0 #ffe6c995,0 2px 0 #e3ab8b50;border-radius:9px}
.sidebar-footer{border-color:#c9e0ef}
.tiny-orbit,.tool-tile,.coin-icon,.payment-icon,.asset-icon{border:1px solid #ffffff8c;box-shadow:inset 0 3px 1px #ffffffa6,inset 0 -4px 0 #00000006,0 4px 7px #4d719119;border-radius:15px}
.tiny-orbit{background:linear-gradient(145deg,#e8dcff,#d9c5fb)}
.tiny-orbit svg,.tool-tile svg{stroke-width:2.5}
.add-chat{background:linear-gradient(145deg,#ffb47e,#ff925a);border-color:#f28d58;border-radius:18px;box-shadow:inset 0 3px 1px #ffe2c199,inset 0 -4px 0 #e77d3422,0 5px 0 #e9c1ad,0 8px 14px #cf96651a}
.add-chat:hover{background:linear-gradient(145deg,#ffc08d,#ffa26c)}
.main-button,.send-button{background:linear-gradient(150deg,#7c54e6,#6242dc);border:1px solid #7250df;box-shadow:inset 0 2px 1px #d1b5ff66,0 4px 0 #c6b7ee;border-radius:15px}
.main-button:hover{background:linear-gradient(150deg,#7953e7,#5735ce)}
.soft-button{border-radius:14px;box-shadow:inset 0 2px 0 #ffffff80,0 3px 0 #d4c3ea70}
.conversation-tools>.icon-button,.call-history .icon-button{box-shadow:inset 0 2px 1px #ffffff70,inset 0 -3px 0 #38286c0d,0 3px 0 #c3d6e570;border-radius:15px}
.conversation-tools>.icon-button[data-action="voice-call"]{background:linear-gradient(145deg,#def9f1,#bcebdc);border-color:#abdbc9;color:#326d5a}
.conversation-tools>.icon-button[data-action="video-call"]{background:linear-gradient(145deg,#8964ef,#6847db)}
.white-card{background:#ffffffde;border-color:#d0e3f0;box-shadow:inset 0 2px 0 #fff,0 5px 0 #cde2f048}
.tool-grid>button{background:linear-gradient(145deg,#ffffff,#f0f8ff);border-color:#d4e3f0;box-shadow:0 4px 0 #cbdfee38;border-radius:19px}
.tool-grid>button:hover{background:linear-gradient(145deg,#fff,#e8f4ff);border-color:#b9d7ed}
.tool-tile.orange{background:linear-gradient(145deg,#ffe2c8,#ffc99e)}
.tool-tile.purple{background:linear-gradient(145deg,#eee3ff,#d8bffd)}
.tool-tile.mint{background:linear-gradient(145deg,#dffbed,#b7ead4)}
.tool-tile.yellow{background:linear-gradient(145deg,#fff4cf,#ffe4a6)}
.tool-tile.blue{background:linear-gradient(145deg,#e1f3ff,#b6ddff)}
.tool-tile.pink{background:linear-gradient(145deg,#ffe3ef,#f2bedb)}
dialog{background:#f9fcff;border-color:#cfdff0}
.modal-header>.icon-button{background:linear-gradient(145deg,#f3eaff,#dfcef8);box-shadow:inset 0 2px 0 #fff,0 3px 0 #d0c1e753;border-radius:15px}
.form-field input,.form-field select{background:linear-gradient(180deg,#fff,#f1f8ff);border-color:#c5daeb}
.call-screen{background:radial-gradient(ellipse at 5% 0,#d7eaff,transparent 65%),linear-gradient(140deg,#e9f8ff,#eee4ff)}
.call-screen-v4 .call-control{background-image:linear-gradient(145deg,#ffffff60,#ffffff00 65%);box-shadow:inset 0 3px 1px #ffffff8c,inset 0 -4px 0 #00000008,0 4px 0 #cfc3e9}
.call-screen-v4 .call-control[aria-pressed=true]{background:linear-gradient(145deg,#9468dc,#7650bb);color:#fff}
.call-screen-v4 .call-end-row .end-call{background:linear-gradient(145deg,#e16b66,#c64747);box-shadow:inset 0 3px 1px #ffb7ae70,0 4px 0 #d9b6be}
/* A soft, distinct cushion for each navigation symbol. Text labels stay visible. */
:where(.nav-item,.mobile-nav button){--tile-top:#e9e1ff;--tile-bottom:#cbb8f8;--tile-ink:#65479a;--tile-shadow:#bba5df}
[data-nav="calls"]{--tile-top:#e0fff0;--tile-bottom:#ace3ca;--tile-ink:#28694f;--tile-shadow:#99cab4}
[data-nav="wallet"]{--tile-top:#ffead2;--tile-bottom:#ffc99f;--tile-ink:#87451e;--tile-shadow:#dfb18c}
[data-nav="social"]{--tile-top:#ffe3f0;--tile-bottom:#efb8da;--tile-ink:#8b416d;--tile-shadow:#cf9dbe}
[data-nav="profile"],[data-nav="explore"]{--tile-top:#e0f6ff;--tile-bottom:#add7fa;--tile-ink:#32678d;--tile-shadow:#93bddb}
.nav-item>svg,.mobile-nav button>svg{width:38px;height:38px;padding:7px;box-sizing:border-box;border:1px solid #ffffff88;border-radius:14px;background:linear-gradient(145deg,var(--tile-top),var(--tile-bottom));color:var(--tile-ink);stroke-width:2.45;box-shadow:inset 0 2px 1px #ffffffc2,inset 0 -3px 0 #00000005,0 3px 0 var(--tile-shadow),0 5px 8px #57779018}
.nav-item.active,.mobile-nav button.active{background:linear-gradient(150deg,#7c54e6,#6241dd);color:#fff;box-shadow:inset 0 2px 1px #cbb1ff80,0 4px 0 #c4b4ee}
.nav-item.active>svg,.mobile-nav button.active>svg{color:#fff;background:linear-gradient(145deg,#9270e4,#805ce3);border-color:#cdb6ff66;box-shadow:inset 0 2px 1px #eadcff80,0 3px 0 #5432b94d}
.rail nav .nav-item{padding:8px 3px;gap:6px;border-radius:18px}
.rail nav{gap:9px}
@media(max-width:650px){
 .mobile-nav{background:linear-gradient(180deg,#f2faff,#e2f1fd);border-color:#c9deef;box-shadow:0 -5px 20px #83b2d012;gap:6px;padding-top:7px}
 .mobile-nav button{border-radius:17px;gap:6px;padding:6px 2px;font-size:10px;color:#5e5974;min-height:60px}
 .mobile-nav button>svg{width:35px;height:35px;padding:6px;border-radius:13px}
 .mobile-nav button.active{color:white}
 .contact{border-radius:21px}
 .contact .avatar{border-radius:18px}
 .add-chat{border-radius:18px}
 .sidebar-footer{margin-bottom:14px}
}
@media(max-height:700px) and (min-width:651px){
 .rail{padding-top:18px;padding-bottom:16px;gap:18px}
 .rail nav{gap:5px}
 .rail nav .nav-item{padding:6px 3px;gap:4px;font-size:10px}
 .rail nav .nav-item>svg{width:32px;height:32px;padding:5px;border-radius:12px}
 .rail-bottom{gap:14px}
}