:root{--bg:#f4f6f9;--panel:#2c3e50;--accent:#1abc9c;--text:#333;--white:#fff;--border:#ddd}
*{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
body{display:flex;background:var(--bg);color:var(--text);font-size:1rem;height:100vh;overflow:hidden;flex-direction:column}
.top-bar{padding:1vh 2vw;display:flex;background:var(--panel);color:var(--white);z-index:100;justify-content:space-between;align-items:center;flex-wrap:wrap}
.nav-group,.auth-group{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
button{transition:opacity 0.2s;border:none;padding:0.6rem 1rem;border-radius:4px;display:inline-flex;background:var(--accent);color:var(--white);font-size:0.9rem;cursor:pointer;align-items:center;gap:0.3rem}
button:hover{opacity:0.9}
.top-bar button{border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1)}
.top-bar button:hover{background:var(--accent)}
.top-bar .btn-key{padding:0.6rem 0.35rem;display:inline-flex;height:2em;align-items:center;justify-content:center}
.container{padding:2vh 3vw;padding-bottom:12vh;overflow-y:auto;position:relative;flex:1}
.modal{width:100%;display:flex;background:rgba(0,0,0,0.5);position:fixed;top:0;left:0;height:100%;z-index:190;justify-content:center;align-items:center;overflow:hidden}
#emojiModal{z-index:220}
.modal-content{padding:2rem;border-radius:6px;width:90%;box-shadow:0 4px 15px rgba(0,0,0,0.2);background:var(--white);max-width:500px}
.modal-content h3{margin-bottom:1rem}
.modal-actions{display:flex;flex-direction:column;gap:0.8rem}
select,input[type="text"],input[type="file"]{width:100%;padding:0.6rem;border:1px solid var(--border);border-radius:4px;background:var(--white);font-size:0.95rem}
.card-container{border-radius:8px;padding:2rem;box-shadow:0 2px 8px rgba(0,0,0,0.05);margin-bottom:5vh;background:var(--white);min-height:50vh}
.card-placeholder{padding-top:10vh;color:#888;font-size:1.2rem;text-align:center}
.card-form h2,.card-box h2{margin-bottom:1.5rem;border-bottom:2px solid var(--bg);padding-bottom:0.5rem;display:flex;font-size:1.5rem;align-items:center;gap:1rem}
.badge-fill{animation:pulse 1.5s infinite;padding:0.2rem 0.5rem;border-radius:3px;background:#e74c3c;color:var(--white);font-size:0.8rem}
@keyframes pulse{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}
.fields-grid{margin-bottom:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.f-row{display:flex;flex-direction:column;gap:0.3rem}
.f-row label{color:#666;font-size:0.85rem;font-weight:bold;text-transform:uppercase}
.deal-relations,.deal-files{margin-top:2rem;border-top:1px dashed var(--border);padding-top:1.5rem}
.deal-relations h3,.deal-files h3{margin-bottom:1rem;color:var(--panel);font-size:1.2rem}
#relBox{display:flex;flex-direction:column;gap:0.5rem}
.rel-tag{padding:0.2rem 0.5rem;border-radius:3px;border:1px solid var(--border);display:inline-flex;background:var(--bg);font-size:0.9rem;align-items:center;gap:0.4rem}
.rel-tag i{color:#e74c3c;cursor:pointer}
.file-tree{padding:1rem;border-radius:4px;display:flex;background:var(--bg);flex-direction:column;gap:0.4rem}
.file-tree a{color:#2980b9;font-size:0.95rem;text-decoration:none}
.file-tree a:hover{text-decoration:underline}
.upload-zone{border:1px dashed var(--accent);padding:1rem;border-radius:4px;margin-top:1rem;display:flex;background:#fdfefe;flex-wrap:wrap;gap:0.5rem;align-items:center}
.upload-zone h4{width:100%;color:#555;font-size:0.9rem}
.upload-zone select,.upload-zone input{width:auto;min-width:150px;flex:1}
.chat-bar{width:100%;box-shadow:0 -2px 10px rgba(0,0,0,0.15);background:var(--panel);color:var(--white);position:fixed;bottom:0;left:0;z-index:150}
.chat-header{padding:1rem 2vw;display:flex;font-weight:bold;cursor:pointer;justify-content:space-between;align-items:center}
.chat-content{border-top:1px solid var(--border);display:flex;background:var(--white);color:var(--text);flex-direction:column}
.chat-messages{padding:1rem;display:flex;background:#f9f9f9;overflow-y:auto;flex:1;flex-direction:column;gap:0.5rem}
.msg{padding:0.5rem 0.8rem;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.05);width:fit-content;background:var(--white);max-width:85%}
.msg strong{color:var(--panel);font-size:0.9rem}
.msg small{margin-top:0.2rem;display:block;color:#999;font-size:0.7rem;text-align:right}
.chat-input-area{padding:0.5rem;border-top:1px solid var(--border);display:flex;background:var(--bg);flex-direction:column;gap:0.4rem}
.chat-input-area textarea{padding:0.5rem;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.95rem;line-height:1.4;resize:none;min-height:70px;box-sizing:border-box;flex:1}
.chat-input-row{display:flex;gap:0.5rem;align-items:stretch}
.chat-input-area button.chat-send-btn{padding:0.5rem 1rem;border:none;border-radius:6px;width:auto;display:flex;background:#3498db;color:#fff;font-size:1.1rem;cursor:pointer;height:auto;flex:none;align-items:center;justify-content:center}
.chat-input-area button.chat-send-btn:hover{background:#2980b9}
.chat-toolbar{display:flex;gap:0.5rem;align-items:center;justify-content:center}
/* Chat audio & emoji buttons */
.chat-toolbar button.chat-emoji-btn{padding:0.2rem 0.5rem;border:none;background:none;font-size:1.3rem;line-height:1;cursor:pointer}
.chat-toolbar button.chat-record-btn,.chat-toolbar button.chat-file-btn{transition:all 0.15s;padding:0.4rem 0.6rem;width:auto;border:1px solid #ddd;border-radius:6px;background:#f8f9fa;color:#555;font-size:1rem;cursor:pointer;flex:none}
.chat-toolbar button.chat-record-btn:hover,.chat-toolbar button.chat-file-btn:hover{border-color:#1abc9c;background:#e3f2fd;color:#1abc9c}
.chat-toolbar button.chat-record-btn.recording{animation:recPulse 1s infinite;border-color:#e74c3c;background:#e74c3c;color:#fff}
@keyframes recPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
/* Audio styles consolidated */
/* Own message right-alignment */
.msg-own{margin-left:auto;margin-right:0;padding:0.6rem 0.8rem;background:#dcf8c6!important}
.msg-own small{text-align:left}
#recTimer{animation:recPulse 1s infinite;margin-left:0.5rem;white-space:nowrap;color:#e74c3c;font-weight:bold;font-size:0.95rem;vertical-align:middle}
.msg-audio{width:100%;border-radius:6px;display:block;min-width:280px;max-width:480px;height:40px}
.msg-audio-recording{margin-top:0.3rem;display:inline-block;color:#e74c3c;font-size:0.8rem}
.msg-audio-recording i{animation:recPulse 1s infinite}
@media(max-width:768px){.top-bar{padding:0.5rem}
.nav-group{width:100%;justify-content:space-between;gap:0.2rem}
.top-bar button{padding:0.5rem 0.2rem;font-size:0.75rem;flex:1;justify-content:center;flex-direction:column}
.auth-group{width:100%;margin-top:0.5rem;border-top:1px solid rgba(255,255,255,0.1);padding-top:0.5rem;justify-content:space-between}
.container{padding:1rem;padding-bottom:15vh}
.card-container{padding:1rem;margin-bottom:10vh}
.fields-grid{grid-template-columns:1fr}
.upload-zone select,.upload-zone input{width:100%;flex:none}
#trashBtn{width:100%;white-space:nowrap;flex-direction:row;justify-content:center}}
/* Progress bar styles */
.p-bar-bg{border-radius:12px;width:80%;margin:0.5rem auto 0;background:#555;height:8px;max-width:300px;overflow:hidden}
.p-bar-fill{transition:width 0.3s ease;width:0%;border-radius:12px;background:#FF8C00;height:100%}
.chat-progress{padding:0.3rem 0.5rem;text-align:center}
.p-bar-pct{font-size:0.75rem;color:#aaa;margin-left:0.5rem;display:inline-block;vertical-align:middle}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.fa-spin{animation:spin 1s infinite linear}
#chatAlert{transition:color 0.3s;color:#bdc3c7}
#chatAlert.active{animation:chatBlink 1s infinite}
@keyframes chatBlink{0%{color:#e74c3c;transform:scale(1)}
50%{color:#f1c40f;transform:scale(1.3)}
100%{color:#e74c3c;transform:scale(1)}}
/* Dialog modals */
.dialog-overlay{width:100%;display:flex;background:rgba(0,0,0,0.55);position:fixed;top:0;left:0;height:100%;z-index:200;justify-content:center;align-items:center}
.dialog-box{padding:1.8rem 2rem;border-radius:8px;width:90%;box-shadow:0 6px 25px rgba(0,0,0,0.25);background:var(--white);text-align:center;max-width:420px}
.dialog-box p{margin-bottom:1.5rem;color:var(--text);font-size:1.05rem;line-height:1.5}
.dialog-box .dialog-inp{width:100%;padding:0.6rem;border:1px solid var(--border);border-radius:4px;margin-bottom:1.2rem;background:var(--white);font-size:0.95rem}
.dialog-actions{display:flex;gap:0.8rem;justify-content:center}
.dialog-actions button{padding:0.6rem 1.2rem;font-size:0.95rem;min-width:100px;justify-content:center}
.dialog-actions .btn-cancel{background:#95a5a6}
.dialog-actions .btn-cancel:hover{opacity:0.9}
.dialog-box .emoji-btn{transition:all 0.15s;padding:0.4rem 0.7rem;width:auto;border:1px solid #ddd;border-radius:6px;display:inline-flex;background:#f8f9fa;color:#FF9800;font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center;flex:none}
.dialog-box .emoji-btn:hover{border-color:#FF9800;background:#fff3e0;transform:scale(1.1)}
#trashBtn{white-space:nowrap;justify-content:center}
#trashBtn i{margin-right:0.2rem}
.btn-del{background:#e74c3c}
.btn-del:hover{background:#c0392b}
/* Emoji picker */
.emoji-grid{padding:0.5rem;display:grid;max-height:300px;overflow-y:auto;grid-template-columns:repeat(6,1fr);gap:0.5rem}
.emoji-grid .emoji-item{transition:all 0.15s;padding:0.6rem;border-radius:6px;border:1px solid #eee;display:flex;background:#f8f9fa;font-size:1.5rem;cursor:pointer;align-items:center;justify-content:center}
.emoji-grid .emoji-item i{color:#FF9800}
.emoji-grid .emoji-item:hover{border-color:#1abc9c;background:#e3f2fd;transform:scale(1.15)}
.emoji-grid .emoji-item:active{transform:scale(0.95)}
/* Emoji icons in chat messages */
.chat-emoji{font-size:1.2rem;margin:0 0.1rem;vertical-align:middle;color:#f90}
/* Video recording toggle */
.chat-toolbar button.chat-video-btn{transition:all 0.15s;padding:0.4rem 0.6rem;width:auto;border:1px solid #ddd;border-radius:6px;background:#f8f9fa;color:#555;font-size:1rem;cursor:pointer;flex:none}
.chat-toolbar button.chat-video-btn:hover{border-color:#3498db;background:#e3f2fd;color:#3498db}
.chat-toolbar button.chat-video-btn.active{border-color:#3498db;background:#3498db;color:#fff}
.chat-toolbar button.chat-photo-btn{transition:all 0.15s;padding:0.4rem 0.6rem;width:auto;border:1px solid #ddd;border-radius:6px;background:#f8f9fa;color:#555;font-size:1rem;cursor:pointer;flex:none}
.chat-toolbar button.chat-photo-btn:hover{border-color:#27ae60;background:#e8f8f0;color:#27ae60}
.chat-toolbar button.chat-gallery-btn{transition:all 0.15s;padding:0.4rem 0.6rem;width:auto;border:1px solid #ddd;border-radius:6px;background:#f8f9fa;color:#555;font-size:1rem;cursor:pointer;flex:none}
.chat-toolbar button.chat-gallery-btn:hover{border-color:#8e44ad;background:#f4ecf7;color:#8e44ad}
/* Video message in chat - width set dynamically by JS (60% of chat width) */
.msg-video{border-radius:6px;margin:0 auto;display:block}
.msg-video-recording{margin-top:0.3rem;display:inline-block;color:#e74c3c;font-size:0.8rem}
.msg-video-recording i{animation:recPulse 1s infinite}
.msg-photo{border-radius:6px;margin:0 auto;display:block;max-width:100%;cursor:pointer}
.msg-photo:hover{opacity:0.95}
/* Video recording modal - fullscreen with 3% margins */
.video-rec-modal{width:100%;padding:3%;border-radius:0;box-shadow:none;display:flex;background:rgba(0,0,0,0.92);text-align:center;height:100%;max-width:none;max-height:none;flex-direction:column}
.video-rec-modal h3{margin-bottom:0.2rem;color:#fff;font-size:0.95rem;text-shadow:0 1px 3px rgba(0,0,0,0.5);flex-shrink:0}
.video-rec-modal video{width:auto;border-radius:8px;margin:0 auto;display:block;background:#000;min-height:0;height:auto;max-width:100%;max-height:100%;flex:1;object-fit:contain}

/* Photo capture modal overrides */
#photoCaptureModal .video-rec-modal{background:rgba(0,0,0,0.15);padding:3%;display:flex;flex-direction:column}
#photoCaptureModal .video-rec-modal h3{flex:0 0 auto;margin:0 0 0.3rem 0;color:#fff;text-align:center}
#photoCaptureModal .video-rec-modal video{flex:1;width:auto;max-width:100%;object-fit:contain;border-radius:8px;background:#000;min-height:0}
#photoCaptureModal #photoCaptureResult{flex:1;width:auto;max-width:100%;object-fit:contain;border-radius:8px;background:#000;min-height:0}
#photoCaptureModal .video-rec-controls{flex:0 0 auto;margin-top:0.5rem}
#photoCaptureResult{width:auto;border-radius:8px;object-fit:contain;flex:1;min-height:0;background:#000;margin:0 auto;max-width:100%;max-height:100%;height:auto}
.video-rec-controls{margin-top:0;display:flex;flex-shrink:0;justify-content:center;gap:0.8rem;flex-wrap:wrap}
.video-rec-controls button{transition:background 0.15s;padding:0.7rem 1.4rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer}
#videoStartBtn{background:#27ae60;color:#fff}
#videoStartBtn:hover{background:#219a52}
#videoStopBtn{background:#e74c3c;color:#fff}
#videoStopBtn:hover{background:#c0392b}
#videoCancelBtn{background:#666;color:#fff}
#videoCancelBtn:hover{background:#888}
#videoRecTimer{margin-top:0.2rem;color:#fff;font-size:1.2rem;font-weight:bold;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,0.5);flex-shrink:0}
#videoSwitchCamBtn{background:#3498db;color:#fff}
#videoSwitchCamBtn:hover{background:#2980b9}

#photoCaptureBtn{background:#27ae60;color:#fff}
#photoCaptureBtn:hover{background:#219a52}
#photoRetakeBtn{background:#f39c12;color:#fff}
#photoRetakeBtn:hover{background:#e67e22}
#photoSendBtn{background:#3498db;color:#fff}
#photoSendBtn:hover{background:#2980b9}
#photoSwitchCamBtn{background:#3498db;color:#fff}
#photoSwitchCamBtn:hover{background:#2980b9}
#photoCancelBtn{background:#666;color:#fff}
#photoCancelBtn:hover{background:#888}

/* Trash table styles */
.btn-restore{background:#27ae60;color:#fff;border:none;padding:0.3rem 0.6rem;border-radius:4px;cursor:pointer;font-size:0.85rem;margin-right:0.3rem}
.btn-restore:hover{background:#219a52}
.btn-del-trash{background:#e74c3c;color:#fff;border:none;padding:0.3rem 0.6rem;border-radius:4px;cursor:pointer;font-size:0.85rem}
.btn-del-trash:hover{background:#c0392b}
#trashList table td{vertical-align:middle;padding:0.4rem 0.5rem;font-size:0.9rem}
#trashList table th{padding:0.5rem;font-size:0.9rem;text-align:left}

@media (max-width: 768px) {
#trashList{overflow-x:auto}
#trashList table{width:150%!important}
}

/* Dropdown styling - icons & selection colors */
select{cursor:pointer;transition:border-color 0.2s,color 0.2s}
select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(26,188,156,0.2)}
select option{padding:0.5rem 0.6rem}
select option:checked{font-weight:bold;background:var(--accent);color:var(--white)}
select option:hover{background:var(--bg)}
.aida-select option{padding:0.5rem 0.8rem;font-weight:bold}
#itemSelect option{padding:0.5rem 0.8rem}
.upload-zone select{cursor:pointer}


/* Enhanced dropdown styling */
.aida-select option:checked{background:var(--accent);color:#fff}
#itemSelect option:checked{background:var(--accent);color:#fff;font-weight:bold}
.upload-zone select option:checked{background:var(--accent);color:#fff}
select.has-value{font-weight:bold}
.modal-select option{padding:0.6rem 0.8rem;font-size:0.95rem}
.modal-select option:checked{background:var(--accent);color:#fff}


/* Entity Selector Table */
#selectorList table{width:100%;border-collapse:collapse;}
#selectorList th{background:#2c3e50;color:#fff;padding:0.5rem;text-align:left;font-size:0.9rem;user-select:none;white-space:nowrap;cursor:pointer;}
#selectorList td{padding:0.4rem 0.5rem;border-bottom:1px solid #eee;font-size:0.9rem;vertical-align:middle;}
#selectorList tr:hover td{background:#e8f0fe;}
#selectorList tr{cursor:pointer;}
#selectorList tr:nth-child(even) td{background:#f8f9fa;}
#selectorList tr:hover td{background:#e8f0fe;}

/* Relation ( ) new styles */
.rel-group{margin-bottom:1rem;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}
.rel-group-header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0.8rem;background:#f0f2f5;border-bottom:1px solid #e0e0e0}
.rel-group-header strong{font-size:0.95rem;color:#2c3e50}
.rel-group-actions{display:flex;gap:0.3rem}
.rel-items{padding:0.5rem}
.rel-item{border:1px solid #eee;border-radius:4px;margin-bottom:0.4rem;padding:0.5rem 0.7rem;background:#fafafa}
.rel-item:last-child{margin-bottom:0}
.rel-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.3rem}
.rel-item-name{font-weight:bold;font-size:0.95rem;color:#2c3e50}
.rel-item-actions{display:flex;gap:0.3rem}
.rel-btn{background:none;border:none;cursor:pointer;padding:0.2rem 0.4rem;font-size:0.9rem;border-radius:3px;display:inline-flex;align-items:center;color:#7f8c8d;transition:all 0.15s}
.rel-btn:hover{background:#e8f0fe;color:#3498db}
.rel-btn-del:hover{background:#fde8e8;color:#e74c3c}
.rel-btn-edit:hover{background:#e8f0fe;color:#f39c12}
.rel-item-details{display:flex;flex-wrap:wrap;gap:0.2rem 0.8rem;font-size:0.85rem;color:#555}
.rel-field{white-space:nowrap}
.rel-field-label{color:#999;margin-right:0.2rem}
.rel-field a{text-decoration:none}
.rel-field a:hover{text-decoration:underline}
.rel-empty{padding:0.5rem 0.7rem;color:#999;font-size:0.9rem;font-style:italic}
.rel-placeholder{padding:.5em 0;color:#999;font-style:italic}#ArrBack{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:190;visibility:hidden;width:1.8em;height:4em;background:rgba(255,255,255,.7);border:1px solid #bbb;border-left:none;border-radius:0 40px 40px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;}#ArrBack>div{font-size:1.2em;color:#555;}

/* Task Manager */
.task-btn{position:relative;}
.task-btn .badge{position:absolute;top:-5px;right:-8px;background:#e74c3c;color:#fff;border-radius:50%;padding:0.2rem 0.4rem;font-size:0.7rem;line-height:1;min-width:16px;text-align:center;}
.task-btn.blink{animation:blink-anim 1s ease-in-out 3;}
@keyframes blink-anim{0%{opacity:1;background:rgba(231,76,60,0.3);border-radius:4px;}50%{opacity:0.5;background:rgba(231,76,60,0.6);border-radius:4px;}100%{opacity:1;background:transparent;}}
.task-item:hover{background:#f5f6fa;}
.task-detail textarea{width:100%;box-sizing:border-box;}
.deal-tasks{border-top:2px solid #eee;padding-top:0.5rem;margin-top:1rem;}
.deal-tasks h3{font-size:1rem;margin:0 0 0.5rem;}
#taskModal .modal-content{max-width:700px;}
#taskCreateModal .modal-content{max-width:500px;}