/* chat_auto.php: 34/66 split, warm neutral surfaces, black sent messages. */
.feature-tools .product-image-stage:has(.product-panel-communication.is-active){height:auto;aspect-ratio:1440/900}
.feature-tools .communication-demo{position:relative;width:100%;height:100%;padding:0;display:block;background:#edf0f4;overflow:hidden}
.cm-canvas{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:center;pointer-events:none;color:#111827;font:16px/1.5 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif}
.cm-window{position:absolute;inset:0;overflow:hidden;background:#fff}
.cm-browser{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#f7f8fa;border-bottom:1px solid #e7e9ed;color:#7f8794}
.cm-browser>span:first-child{display:flex;gap:7px}.cm-browser i{width:9px;height:9px;background:#ff625c;border-radius:50%}.cm-browser i:nth-child(2){background:#ffbd44}.cm-browser i:nth-child(3){background:#00ca4e}
.cm-browser>small{width:54%;padding:3px;text-align:center;border:1px solid #e6e8ec;border-radius:7px;background:#fff;font-size:11px}
.cm-shell{height:calc(100% - 40px);padding:0;background:#fff}
.cm-layout{display:flex;height:100%;overflow:hidden;background:#fff}
.cm-list-pane{width:34%;flex:none;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.cm-list-head{padding:22px 22px 16px;border-bottom:1px solid #e7e5e4}
.cm-list-head h3{margin:0;font-size:23px;font-weight:780;letter-spacing:-.03em}
.cm-tabs{display:inline-flex;gap:4px;padding:4px;margin-top:16px;border:1px solid #e7e5e4;border-radius:14px;background:#f5f5f4}
.cm-tabs span{display:flex;align-items:center;height:34px;padding:0 16px;border-radius:10px;color:#57534e;font-size:14px;font-weight:650}.cm-tabs .is-active{background:#111;color:#fff;box-shadow:0 8px 22px #0000001f}
.cm-rooms{display:flex;flex-direction:column;gap:8px;padding:12px;overflow:hidden}
.cm-room{display:flex;align-items:center;gap:10px;min-height:83px;padding:13px 12px;border:1px solid #e7e5e4;border-radius:15px;background:#fff}
.cm-room.is-selected{background:#f7f7f6;border-color:#d6d3d1}
.cm-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:1px solid #e7e5e4;background:#f5f5f4;color:#a0a6ae}.cm-avatar svg{width:26px;height:26px;fill:currentColor}
.cm-room-info{flex:1;min-width:0}.cm-room-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:760}.cm-room-info p{margin:4px 0 0;font-size:12px;color:#78716c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-room-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#9a9a9f}.cm-room-side small{font-size:10px}.cm-room-side b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;font-size:10px}.cm-room-side>span{font-size:12px}
.cm-conversation{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;border-left:1px solid #e7e5e4;background:#fff;overflow:hidden}
.cm-header{height:70px;flex:none;display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid #e7e5e4}.cm-header strong{font-size:16px;font-weight:760}.cm-user-chip{padding:3px 7px;border-radius:7px;background:#f5f5f4;color:#78716c;font-size:10px}.cm-header-more{margin-left:auto;color:#727782}
.cm-chat-box{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:18px 22px;overflow:hidden;background:radial-gradient(circle at 50% 0%,#f43f5e0d,transparent 32%),#fff}
.cm-date{align-self:center;padding:4px 10px;margin:0 0 10px;border-radius:20px;background:#f5f5f4;color:#78716c;font-size:11px}
.cm-message{position:relative;flex:none;max-width:72%;padding:10px 14px;margin-bottom:18px;border-radius:18px;font-size:15px;line-height:1.55}.cm-message>small{position:absolute;bottom:-17px;font-size:10px;color:#78716c;white-space:nowrap}
.cm-sent{align-self:flex-end;background:#111;color:#fff;border-top-right-radius:6px}.cm-sent>small{right:4px}.cm-received{align-self:flex-start;background:#f4f4f5;color:#18181b;border-top-left-radius:6px}.cm-received>small{left:4px}
.cm-message[data-at]{opacity:0;transform:translateY(12px)}
.cm-file{display:flex;align-items:center;gap:12px;min-width:320px}.cm-file-icon{display:grid;place-items:center;width:36px;height:44px;border:1px solid #ffffff70;border-radius:6px;font-size:10px;font-weight:700}.cm-file strong{display:block;font-size:14px}.cm-file small{display:block;font-size:11px;color:#ccc;margin-top:3px}.cm-file svg{margin-left:auto;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.cm-input{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px 18px;border-top:1px solid #e7e5e4;background:#fff}.cm-plus,.cm-send{display:grid;place-items:center;width:42px;height:42px;border:1px solid #e7e5e4;border-radius:14px;background:#fff;font-size:24px}.cm-field{flex:1;padding:10px 14px;border:1px solid #e7e5e4;border-radius:14px;background:#fafafa;color:#8a8a8f}.cm-send{background:#111;color:#fff}.cm-send svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.cm-file-preview{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding:36px;background:#11182744;visibility:hidden;opacity:0}.cm-file-dialog{display:flex;flex-direction:column;width:510px;height:620px;background:#fff;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;box-shadow:0 25px 70px #0003}.cm-file-dialog header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e7e5e4;font-size:14px}.cm-file-dialog header span{font-size:25px;color:#71717a}.cm-file-dialog>div{flex:1;min-height:0;background:#f5f5f4;padding:15px}.cm-file-dialog img{width:100%;height:100%;object-fit:contain}
@media(max-width:767px){.feature-tools .product-image-stage:has(.product-panel-communication.is-active){aspect-ratio:1440/900;height:auto}.feature-tools .communication-demo{height:auto;aspect-ratio:1440/900}}

.cm-drop-zone{position:absolute;z-index:4;inset:82px 16px 88px;display:grid;place-items:center;border:2px dashed #999;border-radius:16px;background:#fffffff0;color:#52525b;visibility:hidden;opacity:0}
.cm-drop-zone>span{margin-top:135px;padding:8px 14px;border-radius:20px;background:#f5f5f4;font-size:15px;font-weight:650}
.cm-drag-file{position:absolute;z-index:6;left:0;top:0;width:290px;height:86px;display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid #e1e1e5;border-radius:14px;box-shadow:0 18px 45px #11182730;opacity:0;visibility:hidden;transform-origin:center}
.cm-drag-file>i{display:grid;place-items:center;width:40px;height:50px;flex:none;border:1px solid #f0c9ce;border-radius:5px;background:#fff4f5;color:#e63e51;font-size:12px;font-weight:800;font-style:normal}
.cm-drag-file strong{display:block;font-size:14px;white-space:nowrap}.cm-drag-file small{display:block;margin-top:4px;color:#93939a;font-size:11px}
.cm-drag-cursor{position:absolute;z-index:7;left:0;top:0;width:27px;height:35px;opacity:0;visibility:hidden;fill:#17191e;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 2px 3px #0004);transform-origin:3px 2px}