/* Pinselstärken wie beim SketchStorm-Regler, mit vier schnellen Größen links. */
.drift-size-row{display:flex;align-items:center;gap:18px;min-height:91px;margin:13px 0 0;padding:13px 17px;background:var(--panel2);border:1px solid var(--line);border-radius:15px}
.drift-brush-presets{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:none}
.drift-brush-preset{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#ffffff0b;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.drift-brush-preset:hover,.drift-brush-preset.selected{border-color:var(--aqua);background:color-mix(in srgb,var(--aqua) 24%,var(--panel2))}
.drift-brush-preset:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.drift-brush-control{display:flex;flex:1;flex-direction:column;gap:8px;min-width:150px;max-width:370px;margin-left:auto}
.drift-brush-control label{display:flex;justify-content:space-between;gap:9px;font-size:13px;color:#eff7fa;font-weight:800}
.drift-brush-control #size-value{font-size:13px;color:var(--aqua);font-variant-numeric:tabular-nums}
.drift-brush-track{position:relative;height:24px;display:flex;align-items:center}
.drift-brush-track #drift-size{width:100%;height:23px;appearance:none;-webkit-appearance:none;margin:0;background:transparent;accent-color:var(--aqua);cursor:pointer}
.drift-brush-track #drift-size::-webkit-slider-runnable-track{height:9px;border-radius:20px;border:1px solid #ffffff63;background:linear-gradient(to right,var(--aqua) 0 var(--track-progress,10%),#536275 var(--track-progress,10%) 100%)}
.drift-brush-track #drift-size::-moz-range-track{height:9px;border-radius:20px;border:1px solid #ffffff63;background:linear-gradient(to right,var(--aqua) 0 var(--track-progress,10%),#536275 var(--track-progress,10%) 100%)}
.drift-brush-track #drift-size::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border:0;border-radius:50%;background:var(--aqua);box-shadow:0 2px 7px #0009}
.drift-brush-track #drift-size::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--aqua);box-shadow:0 2px 7px #0009}
.drift-brush-track #size-dot{position:absolute;left:var(--preview-left,15px);bottom:calc(100% + 10px);width:var(--dot-size,9px);height:var(--dot-size,9px);max-width:none;max-height:none;min-width:2px;min-height:2px;transform:translateX(-50%);opacity:0;pointer-events:none;background:var(--aqua);box-shadow:0 0 0 2px #fff,0 4px 11px #0009;transition:opacity .14s}
.drift-brush-control.adjusting #size-dot{opacity:1}
.drift-size-row{justify-content:center;margin-left:0}
.drift-size-group{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,32px);width:min(100%,720px)}
.drift-brush-presets{justify-content:center;gap:10px}
.drift-brush-preset{display:grid;place-items:center;width:50px;height:50px;padding:0;flex:none}
.drift-preset-circle{display:block;width:var(--preset-size,8px);height:var(--preset-size,8px);border-radius:50%;background:currentColor;max-width:40px;max-height:40px}
.drift-brush-control{margin:0;min-width:180px;max-width:330px}
.drift-canvas-shell canvas{cursor:none}
.drift-canvas-shell canvas.is-fill{cursor:pointer}
.drift-brush-cursor{position:absolute;z-index:4;left:0;top:0;border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #111;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.drift-brush-cursor.visible{opacity:1}
.drift-brush-cursor.eraser{border-style:dashed}

/* Das Farbwahlrad bleibt als zwölfter, vollwertig anklickbarer Farbplatz sichtbar. */
.drift-palette .color-wheel{position:relative;display:grid;place-items:center;width:35px;height:35px;min-width:35px;min-height:35px;flex:none;border:2px solid #fff9;border-radius:50%;background:conic-gradient(#f73a54,#ffda4e,#41d56d,#24c1de,#694ce0,#ec6fd6,#f73a54);box-shadow:0 2px 7px #0007;cursor:pointer}
.drift-palette .color-wheel::after{content:"";display:block;width:11px;height:11px;border-radius:50%;border:1px solid #333;background:#fff;pointer-events:none}
.drift-palette .color-wheel:hover,.drift-palette .color-wheel.selected{outline:2px solid var(--aqua);outline-offset:2px}
.drift-palette .color-wheel input{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

/* Sortierte Werkzeuge: Pinsel/Radierer, Linie/Eimer, Umrissformen, Füllformen, Verlauf. */
.drift-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;justify-items:center;gap:9px;padding:10px}
.drift-tools button{display:grid;place-items:center;width:100%;min-width:0;min-height:49px;padding:5px}
.drift-tools button svg{display:block;max-width:100%;filter:drop-shadow(0 1px 1px #0003)}
.drift-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:57px}
.drift-tools button svg{width:28px;height:28px;flex:none}
.drift-tools button small{display:block;max-width:100%;font-size:9px;font-weight:750;line-height:1.1;white-space:nowrap;letter-spacing:-.02em}

/* Papier, Deckblatt und eine schmale Spiralbindung statt einer bloßen weißen Fläche. */
.drift-canvas-shell{position:relative;overflow:visible;padding:27px 10px 11px;border:1px solid #aab1b7;border-radius:10px;background:#e7e9e9;box-shadow:0 5px 0 #f5f4ed,0 9px 0 #bbc2c5,0 18px 32px #0007}
.drift-canvas-shell::before{content:"";position:absolute;z-index:2;top:-6px;left:3%;right:3%;height:25px;pointer-events:none;background:radial-gradient(ellipse 8px 12px at 12px 12px,transparent 4px,#515866 5px,#dce3e8 7px,#303949 8px,transparent 9px) left top/36px 24px repeat-x}
.drift-canvas-shell::after{content:"";position:absolute;bottom:3px;left:10px;right:10px;height:6px;border-radius:0 0 5px 5px;background:#eeeade;pointer-events:none}
.drift-canvas-shell canvas{position:relative;z-index:1;width:100%;border:1px solid #cfd3d7;border-radius:2px;background:#fff;box-shadow:0 2px 8px #0002}

/* Gemeinsame Albumauflösung als abwechselnde Nachrichten links und rechts. */
.drift-chat-shell{max-width:1280px;margin:0 auto;padding:20px 24px!important}
.drift-chat-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 3px 16px}
.drift-chat-heading h2{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:clamp(25px,3vw,38px)}
.drift-chat-heading h2 .profile-avatar{width:42px;height:42px}
.drift-chat-participants{align-self:center;min-width:200px;max-width:280px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--panel2)}
.drift-chat-participants summary{color:var(--aqua);font-weight:800;cursor:pointer}
.drift-chat-participants .player-list{max-height:250px;overflow:auto;margin-top:10px}
.drift-chat-participants .player-list li{padding:6px 8px}
.drift-chat-log{height:clamp(395px,calc(100dvh - 335px),720px);min-height:390px;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior:contain;padding:23px clamp(14px,3vw,38px) 35px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--bg) 72%,var(--panel2));scrollbar-color:var(--aqua) transparent}
.drift-chat-message{display:flex;flex-direction:column;width:max-content;max-width:min(70%,680px);margin:0 0 23px}
.drift-chat-message.newest{animation:drift-chat-appear .4s ease-out both}
.drift-chat-message.text{margin-right:auto;align-items:flex-start}
.drift-chat-message.drawing{margin-left:auto;align-items:flex-end}
.drift-message-author{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:#f8f6f0}
.drift-message-author .profile-avatar{width:31px;height:31px}
.drift-message-author strong{display:block;font-size:14px}
.drift-message-author small{display:block;font-size:11px;color:var(--muted)}
.drift-message-bubble{width:100%;max-width:100%;border:1px solid var(--line);box-shadow:0 9px 24px #0003;overflow:hidden}
.drift-chat-message.text .drift-message-bubble{padding:17px 21px;border-radius:5px 17px 17px 17px;background:var(--panel2)}
.drift-chat-message.text p{margin:0;font-size:clamp(17px,1.7vw,23px);font-weight:650;line-height:1.48;overflow-wrap:anywhere;color:#fff}
.drift-chat-message.drawing .drift-message-bubble{padding:11px;border-radius:17px 5px 17px 17px;background:#f4f2eb;border-color:#ced2d4}
.drift-chat-canvas{display:block;width:100%;aspect-ratio:1200/720;border:1px solid #d0d3d3;border-radius:3px;background:#fff}
.drift-chat-message.newest .drift-message-bubble{outline:2px solid var(--aqua);outline-offset:2px}
.drift-chat-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;min-height:70px;padding:16px 3px 0}
.drift-chat-controls .muted{margin-left:auto}
.drift-chat-final h1{margin:7px 0 18px;font-size:clamp(36px,4vw,55px)}
.drift-album-tabs{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 15px;scrollbar-color:var(--aqua) transparent}
.drift-album-tabs button{display:flex;align-items:center;gap:8px;flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:#fff}
.drift-album-tabs button.selected,.drift-album-tabs button:hover{border-color:var(--aqua);background:color-mix(in srgb,var(--aqua) 18%,var(--panel2))}
.drift-album-tabs .profile-avatar{width:28px;height:28px}
@keyframes drift-chat-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1060px){.drift-size-row{flex-wrap:wrap}.drift-size-group{flex-wrap:wrap}.drift-brush-control{max-width:330px}}
@media(max-width:700px){.drift-size-row{gap:12px;min-height:0}.drift-brush-presets{width:100%;justify-content:center}.drift-brush-control{min-width:0;width:100%}.drift-palette .color-wheel{width:32px;height:32px;min-width:32px;min-height:32px}.drift-tools{display:flex;flex-wrap:wrap;justify-content:center}.drift-tools button{width:45px;min-height:42px}.drift-chat-shell{padding:15px!important}.drift-chat-heading{align-items:flex-start;flex-wrap:wrap}.drift-chat-participants{max-width:none;width:100%}.drift-chat-log{height:calc(100dvh - 320px);min-height:350px;padding:16px 10px 23px}.drift-chat-message{max-width:91%}.drift-chat-message.drawing{max-width:95%}.drift-chat-message.text .drift-message-bubble{padding:13px 15px}}
@media(prefers-reduced-motion:reduce){.drift-chat-message{animation:none}.drift-chat-log{scroll-behavior:auto}}